---
title: "Localization & Language"
description: "Switch the Landing Page Editor's interface language or replace individual UI labels with your own terminology."
url: https://docs.topol.io/landing-page-editor/guide/localization.html
---

# 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:

```typescript
{
  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:

```typescript
{
  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.

```typescript
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`:

```typescript
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");
```