The lang element will allow for the usage of localization within your app. Which can be setup using language files which are in the form of json files.

Json file

The json files for localization are located at /resources/lang/<locale>/file.json. To change the locale for each user the user can be redirected to /lang/<locale> or it can also be set using javascript with client.setLocale('en').

  "title": "Hello World",
  "navTitles": {
    "home": "Home",
    "profile": "Profile"


The lang element takes a key attribute, which is formatted using "." notation where the first value is the filename (without the extension) followed by the path to the key within the file.

Note: The filename portion allows for / if the language file is one or more sub-directories deep. This means that the key could potentially look like key="nav/public.primary.home"

<lang key="filename.navTitles.home"></lang>

The file that gets loaded is based on the users lang setting, so based on the snipped above, if the lang is set to en then the file that gets loaded is /resources/lang/en/filename.json. If the users lang is set to fr than the file that gets loaded is /resources/lang/fr/filename.json


By default the lang element gets converted to a span, if another element type is desired, the tag attribute may be passed with the desired tag type.

<lang key="filename.itemKey" tag="p"></lang>


If for any reason the translation can not be found, such as the file doesn't exist for that language or the key doesn't exist for that language, than there is the fallback default attribute which takes the default text to be displayed.

<lang key="filename.itemKey" default="The translation could not be found."></lang>