All Tolgee JS integrations such as integration library for Angular or React share the same configuration properties.
There are two modes - production and development. When
apiKey property is not provided, default mode is
apiUrl properties are provided, default mode is
Your api key, which can be obtained using Tolgee web application.
Url of Tolgee server.
In development mode, strings to be translated are wrapped by
@tolgee/core library at first and then parsed and replaced with
translated value. This mechanism is called wrapping.
inputPrefix is inserted before the encoded string and
inputSuffix is inserted after the string. By those 2 strings
Tolgee recognises strings, which are meant to be translated, so its good idea to make them unique enough not to collide
with any other strings, which can appear in DOM.
These strings are unique enough to not clash with any other strings in your DOM, so it will not break your document.
Default language to be set by as currentLanguage default. (default:
Tolgee chooses language automatically by user's default language provided by browser navigator object. To do so, it needs to know which languages are available to determine whether user's preferred language is supported by your app.
If user's language is not available,
defaultLanguage is used instead.
In production mode, localization texts are loaded from json files, which are loaded from url prefixed with this property value.
When your current language is "en" and your
your localization data will be loaded from file loaded from url
You can obtain these files by downloading them from Tolgee Web Application
In development mode, watch is always set to
true because Tolgee needs to find strings to replace with translated values
every time when DOM is changed. In production mode, watching is not always necessary because integration libraries for
React and Angular return translated values directly without wrapping, so wrapped encoded strings are never inserted to DOM.
If you are not using any JS framework, and you wish Tolgee to replace wrapped encoded texts even in production mode, set
watch: true is used in preparing for production part or get started tutorial,
because this tutorial is framework independent and so no framework integration library is used.
To use Tolgee in development with in-context localization, you need to provide a constructor for UI class.
@tolgee/ui are separated to reduce size of
@tolgee/core library while
ui library is needed just
in development mode and may be omitted in production mode.
Element where wrapped strings are expected in development mode. (default:
Tolgee is able to watch also for wrapped localization strings in attributes of DOM elements. These attributes must be specified in these configuration properties.
By default, in development mode, when you move mouse over an element containing translated text and key
ALT is down,
this element is highlighted by changing its background color. To modify the key use
There are elements which can contain wrapped string to be translated, but user is not able to click on them. For example
an option of
select HTML element cannot be used for capturing click even with
ALT down. For these reasons you can
configure Tolgee to "pass" these strings to parent and listen for click events on the parent.
Array of elements in which you don't want Tolgee to replace wrapped strings.
Background color of highlighted element.
rgb(224 240 255)