Localization

The editor ships with English labels by default - validation messages, Yes/No confirmations, Save/Cancel buttons, and file upload status text. To display the editor in another language, wrap it in a Locale component and pass a merged dictionary that covers both the editor-specific keys and the shared core keys (calendar names, button labels, date formats).

Field labels and other data you pass through items and values aren't part of the locale system. You translate those yourself, the same way you'd handle any app-level strings.

Default Locale

Without any locale setup, the editor uses built-in English labels. This is a valid configuration - no extra imports needed.

import { Editor } from "@svar-ui/react-editor";

<Editor items={items} values={values} />

Using an Existing Locale

The package provides ready-made translations for Chinese and German. Import the editor locale from @svar-ui/editor-locales and the core locale from @svar-ui/core-locales, merge them, and pass the result to Locale.

import { Locale } from "@svar-ui/react-core";
import { Editor } from "@svar-ui/react-editor";
import { de } from "@svar-ui/editor-locales";
import { de as deCore } from "@svar-ui/core-locales";

const words = { ...de, ...deCore };

<Locale words={words}>
  <Editor items={items} values={values} />
</Locale>

Both dictionaries are required. The editor locale covers validation messages, confirmation answers, and file upload text. The core locale covers shared UI strings - calendar month/day names, date formats, and common button labels like "OK" and "Cancel" - used by the editor's date fields and other shared controls.

@svar-ui/editor-locales only ships English, German, and Chinese. @svar-ui/core-locales covers more languages (Chinese, German, Spanish, French, Italian, Japanese, Portuguese, Russian, on top of English). If you pick a core language without a matching editor translation, the editor's own labels stay in English unless you supply a custom locale.

Custom Locale

To override a few labels without replacing the entire dictionary, spread the default locale and replace only the keys you need.

import { Locale } from "@svar-ui/react-core";
import { Editor } from "@svar-ui/react-editor";
import { en } from "@svar-ui/editor-locales";
import { en as enCore } from "@svar-ui/core-locales";

const words = {
  ...en,
  ...enCore,
  editor: {
    ...en.editor,
    "Invalid value": "Please check this value",
    Save: "Apply",
    Cancel: "Discard",
  },
};

<Locale words={words}>
  <Editor items={items} values={values} />
</Locale>

Always spread the base locale first so you don't lose unset keys.

For a language without a built-in locale at all, build the dictionary from scratch the same way, keyed by the default English strings:

const ko = {
	editor: {
		"This field is required": "이 필드는 필수입니다",
		"Invalid value": "잘못된 값",
		// other editor strings
	},
	core: {
		/* ... */
	},
	calendar: {
		/* ... */
	},
};

Switching Language at Runtime

Make the words object reactive and re-key the Locale wrapper when the language changes. The key prop forces the editor to re-mount with the new strings.

import { useState, useMemo } from "react";
import { Locale, Segmented } from "@svar-ui/react-core";
import { Editor } from "@svar-ui/react-editor";
import { en, de, cn } from "@svar-ui/editor-locales";
import { en as enCore, de as deCore, cn as cnCore } from "@svar-ui/core-locales";

const dictionaries = {
  en: { ...en, ...enCore },
  de: { ...de, ...deCore },
  cn: { ...cn, ...cnCore },
};

const langs = [
  { id: "en", label: "EN" },
  { id: "de", label: "DE" },
  { id: "cn", label: "CN" },
];

function App() {
  const [lang, setLang] = useState("en");
  const words = useMemo(() => dictionaries[lang], [lang]);

  return (
    <>
      <Segmented options={langs} value={lang} onChange={v => setLang(v.value)} />

      <Locale key={lang} words={words}>
        <Editor items={items} values={values} />
      </Locale>
    </>
  );
}

Since field labels aren't covered by the locale system, translate them alongside the language switch - for example by keeping a small per-language vocabulary and mapping it over items before passing them to the editor.

Locale Object Reference

The editor locale (@svar-ui/editor-locales) contains a single editor key with flat string entries:

Group	Keys	Used in
Validation	This field is required, Invalid value	Field validation messages
Confirmation	Yes, No	Confirmation controls
Actions	Save, Cancel	Editor top bar
Data state	No data	Empty state message
File upload	Add file, Uploading..., Upload failed, Delete file	File upload field

The core locale (@svar-ui/core-locales) adds calendar (month and day names, today/clear/done labels), formats (date/time format strings like %m/%d/%Y, applied by the editor's date fields), and core (shared button labels like OK, Cancel, Select).