Internationalisation (i18n)

FireCMS ships with a built-in internationalisation system powered by i18next and react-i18next. Out of the box the following languages are supported:

Code	Language
`en`	English (default)
`es`	Spanish
`de`	German
`fr`	French
`it`	Italian
`hi`	Hindi

All language switching, persistence between sessions, and string lookup are handled automatically by FireCMSi18nProvider, which you mount at the root of your FireCMS component tree.

Basic setup

Wrap your FireCMS tree with FireCMSi18nProvider. You can see a full wiring example in the Sample PRO Project page — the snippet below focuses only on the i18n part:

import {
    FireCMS,
    FireCMSi18nProvider,
    ModeControllerProvider,
    Scaffold, AppBar, Drawer, NavigationRoutes, SideDialogs,
    SnackbarProvider,
    // … other imports
} from "@firecms/core";

export function MyCMSApp() {
    // … set up controllers (auth, navigation, storage, etc.)

    return (
        <SnackbarProvider>
            <FireCMSi18nProvider locale="es">
                <ModeControllerProvider value={modeController}>
                    <FireCMS
                        navigationController={navigationController}
                        authController={authController}
                        dataSourceDelegate={firestoreDelegate}
                        storageSource={storageSource}
                    >
                        {({ context, loading }) => {
                            if (loading) return <CircularProgressCenter size="large" />;
                            return (
                                <Scaffold>
                                    <AppBar title="My CMS" />
                                    <Drawer />
                                    <NavigationRoutes />
                                    <SideDialogs />
                                </Scaffold>
                            );
                        }}
                    </FireCMS>
                </ModeControllerProvider>
            </FireCMSi18nProvider>
        </SnackbarProvider>
    );
}

The locale prop accepts any BCP-47 language tag ("en", "es", "de", …).

User preference is persisted

When a user changes the language through the FireCMS UI, the choice is saved to localStorage under the key firecms_locale. On the next visit the stored preference takes priority over the locale prop — unless you clear it manually.

Overriding built-in strings

You can replace any FireCMS UI string without touching the library source code. Use the translations prop on FireCMSi18nProvider:

import { FireCMSi18nProvider } from "@firecms/core";
import type { FireCMSTranslations } from "@firecms/core";

// Only include the keys you want to change — everything else keeps its default.
const myTranslations: { [locale: string]: Partial<FireCMSTranslations> } = {
    en: {
        save: "Publish",
        discard: "Throw away",
        delete: "Remove",
    },
    es: {
        save: "Publicar",
        discard: "Descartar",
    },
};

// Inside your component tree:
<FireCMSi18nProvider locale="en" translations={myTranslations}>
    {/* … */}
</FireCMSi18nProvider>

Overrides are deep-merged on top of the built-in strings — keys you don’t provide keep their default values. Overrides are re-applied whenever the translations prop reference changes.

Adding a completely new locale

If your target language is not listed above, create an object that satisfies DeepPartial<FireCMSTranslations> (you don’t have to provide every key — missing keys fall back to English automatically) and pass it under a new locale code:

import { FireCMSi18nProvider } from "@firecms/core";

const ptTranslations = {
    save: "Guardar",
    create: "Criar",
    discard: "Descartar",
    cancel: "Cancelar",
    delete: "Eliminar",
    edit: "Editar",
    copy: "Copiar",
    search: "Pesquisar",
    filter: "Filtro",
    loading: "A carregar...",
    // … add as many keys as you need; the rest default to English
};

<FireCMSi18nProvider
    locale="pt"                              // activate the new locale
    translations={{ pt: ptTranslations }}   // provide its strings
>
    {/* … */}
</FireCMSi18nProvider>

Props reference

Prop	Type	Default	Description
`locale`	`string`	`"en"`	BCP-47 language tag for the active language.
`translations`	`Record<string, DeepPartial<FireCMSTranslations>>`	—	Per-locale string overrides / additions.

Full list of translatable keys

All translatable strings are defined in the FireCMSTranslations interface exported from @firecms/core. Below is a categorised summary of the most commonly customised keys:

Form actions

Key	Default (en)
`save`	Save
`create`	Create
`save_and_close`	Save and close
`create_and_close`	Create and close
`create_copy`	Create copy
`discard`	Discard
`clear`	Clear
`cancel`	Cancel

Entity actions

Key	Default (en)
`edit`	Edit
`copy`	Copy
`delete`	Delete
`delete_selected`	Delete

Collection table

Key	Default (en)
`search`	Search
`filter`	Filter
`no_items`	No items
`no_entries_found`	No entries found
`create_your_first_entry`	Create your first entry
`add`	Add
`remove`	Remove

Dialogs

Key	Default (en)
`delete_confirmation_title`	Delete?
`delete_confirmation_body`	This will delete the entity. Are you sure?
`unsaved_changes_title`	Unsaved changes
`unsaved_changes_body`	You have unsaved changes. Do you want to discard them?
`discard_changes`	Discard changes
`keep_editing`	Keep editing

Key	Default (en)
`open_menu`	Open menu
`close_drawer`	Close drawer
`home`	Home
`admin`	Admin
`log_out`	Log out

Error states

Key	Default (en)
`error`	Error
`error_uploading_file`	Error uploading file
`error_deleting`	Error deleting
`internal_error`	Internal ERROR
`page_not_found`	Page not found
`back_to_home`	Back to home

Authentication

Key	Default (en)
`auth_sign_in`	Sign In
`auth_sign_up`	Sign Up
`auth_password`	Password
`auth_reset_password`	Reset password
`auth_wrong_password`	Wrong password. Please try again.
`auth_user_not_found`	User not found

Data import / export

Key	Default (en)
`import`	Import
`import_data`	Import data
`export`	Export
`export_data`	Export data
`download`	Download

For the complete list of keys with their TypeScript definitions, see the FireCMSTranslations source file and the English baseline locale on GitHub.

Dynamically switching languages at runtime

You can change the active language at runtime by updating the locale prop. FireCMS will switch automatically unless the user has already stored a personal preference in localStorage.

To clear the stored preference and force a language change:

import { FIRECMS_LOCALE_STORAGE_KEY } from "@firecms/core";

// Clear user preference, then set the new locale via the `locale` prop
localStorage.removeItem(FIRECMS_LOCALE_STORAGE_KEY);

Contribute a new language

If you add a full translation for a new language and would like to share it with the community, we welcome pull requests!

Add a new file packages/firecms_core/src/locales/<code>.ts following the structure of the existing en.ts.
Register it inside FireCMSi18nProvider.tsx.
Open a pull request — thank you! 🎉

Have questions? Join the Discord community.