Internationalization

FormKrafter separates two things most libraries conflate: the content of a form (authored by whoever built it) and the chrome of the builder (the UI your users click through). They are localized independently, and neither ever sniffs the browser language — the host decides, the library follows.

Layer 1 — form content

Any label, placeholder, message or option list in a spec may be a plain string or an object keyed by locale:

A localized label

{ "label": { "en": "Full name", "fr": "Nom complet" } }

Pass locale to the renderer to resolve it:

React

<FkFormRender spec={spec} locale="fr" />

Vue

<FkFormRender :spec="spec" locale="fr" />

Web Components

document.querySelector('fk-form-render').locale = 'fr'

In the builder, pass locales to get an edit-language selector — panel fields then read and write the selected language:

<FkFormBuilder locales={['en', 'fr']} />

Tip

Validation messages resolve through the same mechanism, so { "message": { "en": "Required", "fr": "Obligatoire" } } works exactly like a label. See validation.

Layer 2 — builder chrome

The palette, property panel, buttons and brick names are about 90 translation keys. English is built in and French ships in the package:

Before mounting the builder

import { setFkTranslations, frFkTranslations } from '@streamline-pulse/formkrafter-wc'

setFkTranslations(frFkTranslations)

For any other language, pass your own dictionary — it is merged over the built-in English, so a partial translation is valid:

setFkTranslations({
  'palette.search': 'Bausteine suchen…',
  'panel.validation': 'Validierung',
})

Caution

Do not remount the components to switch language — that wipes the form being filled or built. Call setFkTranslations first, then change the locale prop: the renderer re-resolves its labels and the builder re-renders its toolbar, palette and panel in place.

Choosing a locale

Because nothing is automatic, the choice is explicitly yours — a URL segment, a user preference, a cookie. A typical wiring:

Locale from the route

import { setFkTranslations, frFkTranslations } from '@streamline-pulse/formkrafter-wc'

const locale = useRouteLocale()            // your router, your rule
if (locale === 'fr') setFkTranslations(frFkTranslations)

return <FkFormRender spec={spec} locale={locale} />

Next steps

ValidationHow localized validation messages cascade over the built-in defaults.

ThemingThe other half of white-labeling the builder for your users.

Form specsWhere localized text lives inside a brick's configs.