Locales & translations

Strapi's admin panel always ships with English translations, but can display additional languages. You can also override any text that appears in the interface. The present page shows how to define your own locales and extend Strapi or plugin translations from the project codebase.

Defining locales

To update the list of available locales in the admin panel, use the config.locales array:

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:

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 more translations files should be added, place them in the /src/admin/extensions/translations folder.