Text segmentation editor


The task interface configuration guide describes the features of the HTML/JS/CSS editor. You can also try creating a text segmentation editor in Template Builder.

Tolokers can mark up text using the editor in the Toloka web interface. You put the text in the editor, and the Toloker selects individual words and entire phrases, and then marks them with tags.


The text segmentation editor doesn't work on mobile devices.

To make your task available only to Tolokers who log in via a browser, add the Client filter and select Toloka web version. This way, Tolokers won't see the task in the mobile app but will be able to log in using a mobile browser. To prevent Tolokers from accessing the task through mobile browsers, add another filter: Device type = Personal computer.

Text editor features

The editor supports 10 colors for category tags. You can add more than 10 tags, but then the colors will repeat. The first of the specified tags is active.

Figure 1. Example of work in the editor


Think about decomposing the task. The more tags, the more complex the instruction and the response review process.

How do I set it up?

To enable Tolokers to use the editor, import the necessary libraries and add the JS code and CSS styles.

Learn more

Tag descriptions

The editor uses category tags for text segmentation. Each tag has three parameters:

  • tag_color — The color the text will be repainted. The editor supports 10 colors for tags.

  • tag_name — The category to assign to the selected text.

  • tag_hotkey — The button to press to make it faster.

Colors and keyboard shortcuts

You can change the name and color of the tag and the assigned hotkey. You can't change the list of colors because it's hardcoded in the editor's JS library for text highlighting.

Example of the JS code with tag descriptions

Input and output data

The editor's output fields need to be marked as optional because JS checks that at least one word is selected and has a tag. The Toloker can't submit a task that doesn't contain markup.

The editor uses:

  • The input field with the “line” type where the markup text is substituted.

  • The result field in the JSON format. It passes information about the task result.

  • The text_review_mode is auxiliary. It is needed to display tags in the task review mode.

When you mark up control and training tasks in the Toloka interface, select all the output data fields. Otherwise, the words marked with tags won't be displayed in it.


Don't change the input and output field names, otherwise the editor won't work.

How do I work with the editor?

Use this information for the task instructions. Let the Tolokers understand everything at once:

  • If you select a phrase, it is marked with an active tag.

  • If the text belongs to a different category, click the arrow in the frame of the selected word or phrase and select a new tag from the list.

  • You can remove selection by clicking the cross in the upper-right corner.

Contact support

Last updated: February 15, 2023

Getting started
Important tips
Useful recommendations
Working with Toloka
Project analysis
Toloka settings
Task interface
Template Builder
HTML/CSS/JS editor
Help and support