Understanding Tolgee for Web

To work with Tolgee properly you should be familiar with basic Tolgee concepts.

Modes#

Tolgee works in two modes: development and production.

Development mode#

Users who access the page in development mode are able to change localization texts in context of the page. To achieve this, Tolgee needs to identify which text in DOM should be translated. Tolgee basically checks specific DOM subtree on every change and looks for translation keys wrapped in strings provided by configuration properties inputPrefix and inputSuffix. This is the reason why wrapped keys and params are returned from translate and instant functions in development mode.

Production mode#

On the contrary in production mode, translate and instant methods return the translated text directly. Tolgee is unable to change the occurrences anymore. When language changes, you should rerender every translated text manually. However, our integrations for React and Angular handle this out of the box.

Key and parameters wrapping#

In development mode Tolgee wraps every key and it's params into a specific format unless noWrap parameter is true.

<inputPrefix><translationKey>:[<param1>:<value1>,...,,<paramN>:<valueN>]<inputSuffix>

For example:

tolgee.instant("peter_has_n_dogs", {dogsCount: "5"});

returns:

%-%tolgee:peter_has_n_dogs:dogsCount:5%-%

when inputPrefix and inputSuffix configuration properties are default.

Tolgee is then able to find this wrapped string in DOM and replace it with Peter has 5 dogs. It also stores its metadata in suitable parent element and makes it clickable to allow in-context localization.