Skip to content

Adding a language

The shell and every plugin carry their own translations. Adding a new language means telling the kernel about the locale and providing the missing catalog entries.

Edit src/kernel/i18n.ts:

export type Locale = "en" | "fr" | "es";
export const LOCALES: Locale[] = ["en", "fr", "es"];

The LocaleSwitcher and the browser/OS detection use this list automatically.

Create src/i18n/es.ts (replace es with your locale code):

export const es = {
"shell.app.name": "Workbench",
"shell.starting": "Iniciando espacio de trabajo…",
// … copy keys from src/i18n/en.ts and translate them
"shell.locale.label": "Idioma",
"shell.locale.en": "English",
"shell.locale.fr": "Français",
"shell.locale.es": "Español",
};

Then register it in src/i18n/index.ts:

import { es } from "./es";
export const shellCatalog: Catalog = { en, fr, es };

3. Add the locale label to every existing language

Section titled “3. Add the locale label to every existing language”

So the language picker shows a human-readable name for the new locale, add the matching shell.locale.<code> key to src/i18n/en.ts, src/i18n/fr.ts, and any other catalog.

Built-in plugins live in src/plugins/*/. Each one can add the new locale to its messages object:

messages: {
en: { "panel.title": "Notes" },
fr: { "panel.title": "Notes" },
es: { "panel.title": "Notas" },
}

Runtime-loaded plugins can also declare messages with the new locale, or call ctx.i18n.registerCatalog({ es: { ... } }) during setup().

Open the app, use the EN / FR / … picker in the top bar, and reload the page. The chosen locale is persisted in the core store, so it survives restarts on the web and in the Tauri desktop app.

  • Missing keys fall back to English, then to the key itself. This lets you add a language gradually without breaking the UI.
  • The kernel only knows the locales listed in LOCALES. Plugin catalogs for an unknown locale are ignored until that locale is declared.
  • Use ctx.i18n.formatDate and ctx.i18n.formatNumber so dates and numbers follow the active locale automatically.

Documentation under CC BY 4.0 · © SCFlow contributors ·Back to supplychainflow.org