Localization & Language

Two options control the editor's interface text: language switches the whole UI between 20 translations, and textOverride replaces individual labels for brand-specific terminology. Neither touches user-created page content.

language

The language option (string, default "en") sets the interface language for all UI labels, buttons, tooltips, and system messages:

{
  language: "es"  // Spanish interface
}

Only the codes listed below are accepted. An unrecognized code - including a regional variant such as en-US or pt-BR - fails options validation, so the editor throws Invalid options provided and does not start. Pass the plain two-letter code.

Code	Language	Code	Language
en	English (default)	ru	Russian
es	Spanish	tr	Turkish
fr	French	sv	Swedish
de	German	fi	Finnish
it	Italian	ro	Romanian
pt	Portuguese	vi	Vietnamese
nl	Dutch	he	Hebrew
pl	Polish	ar	Arabic
cs	Czech	ja	Japanese
ko	Korean	zh	Chinese

INFO

The language setting changes the UI only. It does not translate user-created content. One exception: language: "cs" also switches the premade-block catalogue to the Czech set.

textOverride

The textOverride option (object, optional) replaces specific UI strings. Keys are dot-separated paths into the editor's locale file (e.g. "tabs.content"), and values are the replacement strings:

{
  textOverride: {
    "tabs.content": "Elements",
    "forms.image_choose": "Pick an image",
    "file_manager.folder_name_invalid": "That folder name isn't allowed"
  }
}

Always target a leaf string. Assigning a string to a whole namespace (e.g. "blocks") overwrites every message under it and breaks the related UI.

textOverride works with language: the overrides are merged into the messages of whichever translation is active, so you can run the UI in Spanish and still replace individual labels with your own wording.

Finding Text Keys for Override

Overriding a specific UI string requires its text key, the dot-path of that label in the locale file. The editor's locale files live in the source repository at apps/landing-page-editor/public/assets/locale/<lang>.json. Open en.json, find the string to change, and use its full path as the key. The file has these 17 top-level namespaces:

actions, ai_prompts, blocks, color_picker, controls, editor, errors, file_manager, forms, layers, layout, mjml, premade, premade_templates, saved_blocks, saved_blocks_panel, tabs

For example, the "Content" tab label lives at tabs.content, so overriding it means passing "tabs.content": "Your label".

Common patterns

Browser language detection

Aligns the editor UI language with the user's browser setting, guarded against unsupported locales. The guard is required rather than defensive: an unguarded navigator.language value like "da" is rejected by options validation and the editor never starts.

const SUPPORTED = [
  "en", "fr", "pt", "es", "ja", "zh", "ru", "tr", "de", "sv",
  "nl", "it", "fi", "ro", "cs", "pl", "ko", "vi", "he", "ar",
];
const detected = navigator.language.split("-")[0];

const TOPOL_OPTIONS = {
  authorize: { apiKey: "YOUR_API_KEY", userId: "user-123" },
  language: SUPPORTED.includes(detected) ? detected : "en",
};

Multi-tenant support

Stores a distinct localization configuration for each organization and selects the appropriate one at runtime. All of this goes under config, together with authorize:

const brandingConfig = {
  companyA: {
    textOverride: { "tabs.content": "Company A Elements" },
  },
  companyB: {
    language: "es",
  },
};

const LPE = LandingPageEditor({
  config: {
    authorize: { apiKey: "YOUR_API_KEY", userId: "user-123" },
    ...brandingConfig[currentTenant],
  },
});
LPE.render("#landing-page-editor");