Locales & translations

Page summary:

Configure the admin panel languages by updating the config.locales array and override default or plugin strings with config.translations or custom translation files.

The Strapi admin panel ships with English strings and supports adding other locales so your editorial team can work in their preferred language. Locales determine which languages appear in the interface, while translations provide the text displayed for each key in a locale.

This guide targets project maintainers customizing the admin experience from the application codebase. All examples modify the configuration exported from /src/admin/appfile, which Strapi loads when the admin panel builds. You'll learn how to declare additional locales and how to extend Strapi or plugin translations when a locale is missing strings.

Defining locales

To update the list of available locales in the admin panel, set the config.locales array in src/admin/app file:

JavaScript

/src/admin/app.js

export default {
  config: {
    locales: ["ru", "zh"],
  },
  bootstrap() {},
};

TypeScript

/src/admin/app.ts

export default {
  config: {
    locales: ["ru", "zh"],
  },
  bootstrap() {},
};

Notes

• The en locale cannot be removed from the build as it is both the fallback (i.e. if a translation is not found in a locale, the en will be used) and the default locale (i.e. used when a user opens the administration panel for the first time).
• The full list of available locales is accessible on Strapi's Github repo.

Extending translations

Translation key/value pairs are declared in @strapi/admin/admin/src/translations/[language-name].json files.

These keys can be extended through the config.translations key in src/admin/app file:

JavaScript

/src/admin/app.js

export default {
  config: {
    locales: ["fr"],
    translations: {
      fr: {
        "Auth.form.email.label": "test",
        Users: "Utilisateurs",
        City: "CITY (FRENCH)",
        // Customize the label of the Content Manager table.
        Id: "ID french",
      },
    },
  },
  bootstrap() {},
};

TypeScript

/src/admin/app.ts

export default {
  config: {
    locales: ["fr"],
    translations: {
      fr: {
        "Auth.form.email.label": "test",
        Users: "Utilisateurs",
        City: "CITY (FRENCH)",
        // Customize the label of the Content Manager table.
        Id: "ID french",
      },
    },
  },
  bootstrap() {},
};

A plugin's key/value pairs are declared independently in the plugin's files at /admin/src/translations/[language-name].json. These key/value pairs can similarly be extended in the config.translations key by prefixing the key with the plugin's name (i.e. [plugin name].[key]: 'value') as in the following example:

JavaScript

/src/admin/app.js

export default {
  config: {
    locales: ["fr"],
    translations: {
      fr: {
        "Auth.form.email.label": "test",
        // Translate a plugin's key/value pair by adding the plugin's name as a prefix
        // In this case, we translate the "plugin.name" key of plugin "content-type-builder"
        "content-type-builder.plugin.name": "Constructeur de Type-Contenu",
      },
    },
  },
  bootstrap() {},
};

TypeScript

/src/admin/app.ts

export default {
  config: {
    locales: ["fr"],
    translations: {
      fr: {
        "Auth.form.email.label": "test",
        // Translate a plugin's key/value pair by adding the plugin's name as a prefix
        // In this case, we translate the "plugin.name" key of plugin "content-type-builder"
        "content-type-builder.plugin.name": "Constructeur de Type-Contenu",
      },
    },
  },
  bootstrap() {},
};

If you need to ship additional translation JSON files—for example to organize large overrides or to support a locale not bundled with Strapi—place them in the /src/admin/extensions/translations folder and ensure the locale code is listed in config.locales.