Managing JSON translation files for web apps

Flat or nested keys

Nested JSON groups keys by screen. Flat JSON writes the full path as one key, such as "checkout.pay_button". Both describe the same strings.

LocalizeMe reads either shape on import, flattening nested objects into dotted keys. It also unwraps a file whose top level is just the language code. The export is flat, so tell your library not to split keys on dots.

{
  "checkout.pay_button": "Jetzt bezahlen",
  "checkout.total": "Gesamt: {{amount}}"
}

i18next and react-i18next

Turn off the key separator so a dotted key is looked up as written.

i18next.init({
  keySeparator: false,
  resources: { de: { translation: de } },
})

vue-i18n

vue-i18n accepts flat messages when flatJson is on.

createI18n({
  flatJson: true,
  messages: { de },
})

Pulling locale files before a build

Run the CLI as a build step and every language file matches what translators approved, with no copy-paste between tools.

localizeme init --project 42 --format json --path 'src/locales/{code}.json'
localizeme pull

Questions

Other guides