i18n Manager — User Guide
A practical walkthrough of every feature in the i18n Manager, the tool for managing your application's interface translations across multiple languages.
Overview
The i18n Manager is a web app for creating, translating, reviewing, and exporting interface text ("translation keys") in many languages at once. Each piece of text is identified by a dotted key such as nav.home or home.welcome, and every key holds one value per language.
Typical things you'll do here:
- Search the catalog of keys and see how complete each one's translations are.
- Add a new key, type the source text, and auto-translate it into every language.
- Import a batch of translations pasted as JSON, or export them for an external translator.
- Turn languages on or off, and switch the manager's own interface language.
Interface tour
The screen is divided into a top bar and three tabs.
- Top bar — the app title on the left; on the right, the API Docs menu, a Language label, and the interface-language switcher.
- Translations tab — the main grid of keys with search, filtering, add/edit/delete, and export.
- Bulk Import tab — paste or upload JSON to import many translations at once.
- Languages tab — activate or deactivate the languages the app supports.
Just below the top bar is a live preview banner that shows sample localized text — it updates instantly when you change the interface language, so you can see localization working.
Switching the interface language
Use the dropdown in the top-right (next to the Language label) to switch the language of the manager's own interface — tabs, buttons, table headers, and the preview banner all re-render in the chosen language.
The interface text itself comes from translation keys (e.g. nav.translations, btn.search). If a key hasn't been translated into the selected language yet, that element falls back to its English text.
Browsing & filtering translations
Open the Translations tab to see the catalog. To narrow it down:
- Namespace dropdown — limit the list to one namespace (the part before the first dot, e.g.
nav,btn,home). - Search box — match text in the key name or its description. Press Enter or click Search.
- Clear — reset both filters and show everything again.
Results are paginated; use the page controls at the bottom to move between pages. The status line shows which rows you're viewing out of the total.
Reading the table
| Column | What it tells you |
|---|---|
| Key | The dotted identifier used in code. |
| Namespace | The grouping prefix, derived automatically from the key. |
| Description | An optional hint for translators. |
| Coverage | How many languages are filled in (e.g. 7/10), with a colored bar — green = complete, amber = partial, red = empty. |
| Reviewed | How many translations have been marked as reviewed/trusted. |
| HTML | A badge if the value contains HTML markup (so it's rendered, not shown as text). |
| Actions | Edit (pencil) and Delete (trash) buttons. |
Adding a translation key
Click Add Key on the Translations tab. The dialog has two steps:
1Translation Settings — choose the source language you're typing in, pick (or type) a namespace, and enter the source text. Click Next.
2Translation — the source text is automatically translated into every language and filled into the per-language fields. Here you:
- Set the full Key name (e.g.
nav.home). - Tick Contains HTML markup if the value includes tags like
<strong>. - Add an optional Description.
- Optionally tick Mark all translations as reviewed on save.
- Review/adjust each language's text, then click Save.
Leave a language field blank to skip saving that language.
Editing a key
Click the pencil icon on any row. The dialog opens straight to the translation fields, pre-filled with the current values. Change the text, key name, description, or HTML flag, optionally mark reviewed, and Save.
Deleting a key
Click the trash icon and confirm. This permanently removes the key and all of its translations in every language. This cannot be undone.
Bulk import
The Bulk Import tab loads many translations at once. Paste JSON into the box, or upload a .json file. Two formats are accepted:
// Plain JSON object
{ "nav.home": { "en": "Home", "de": "Startseite" } }
// JavaScript variable form
var i18n = { "nav.home": { "en": "Home", "de": "Startseite" } };Options (right side):
- Overwrite existing translations — when on, existing values are replaced; when off, existing ones are left untouched and only missing ones are added.
- Mark imported as reviewed — useful when importing trusted/professional translations.
Click Parse & Preview to see a summary (how many keys are new vs. already exist, and which languages each carries). When it looks right, click Import Now. After import you'll see how many translations were imported, skipped, and how many new keys were created.
Exporting
Click Export on the Translations tab. In the dialog:
- Source language — which language's values to export.
- Format — JSON (matches the import format, ready to paste back after translating) or CSV / Excel (opens in a spreadsheet with an empty column to fill in).
- Scope — all keys, or only the current filter/namespace.
Click Download to save the file.
Managing languages
The Languages tab lists every supported language with its code, name, and status. Click Activate / Deactivate to toggle a language.
Deactivating a language hides it from the translations grid, the export options, and the interface-language switcher — but its stored data is preserved and reappears when you reactivate it.
API & developer docs
The API Docs menu in the top bar opens the developer documentation:
- Swagger — interactive API reference where you can try requests live.
- ReDoc — clean, read-only API reference.
For architecture, database, and tooling details, see the Technical Documentation.
FAQ
Why is a language missing from the dropdowns?
It's probably deactivated. Activate it on the Languages tab.
Why does part of the interface stay in English after switching language?
That element's key hasn't been translated into the selected language yet. Add the translation and it will localize on the next load.
My HTML translation shows tags as plain text — why?
The key isn't flagged as containing HTML. Edit the key and tick Contains HTML markup.
I imported but nothing changed.
If Overwrite was off, existing translations are skipped — check the "skipped" count in the result. Re-import with Overwrite on to replace them.