Syncing i18n Translations Files in React App Using JavaScript

If you landed here, you no doubt understand the challenge. I18n or “internationalization” is key to offering your app or website in multiple languages. The challenge is, how do you keep the JSON keys in sync across all language files?

Photo by Towfiqu barbhuiya on Unsplash

Explained: The Problem

As Software Developers, we spend significant time building UI elements that contain text, instructions, or other HTML elements which surface text to the user. This text will depend on the user’s selected language and is typically retrieved from its respective JSON file of key/value pairs such as:

// Example: English Translation File
{
  "title": "Example Ltd.",
  "tagline": "Find the best examples right here.",
  "subtitle": "This is a demo website",
  ...
}
// Example: German Translation File
{
  "tagline": "Hier finden Sie die besten Beispiele.",
  "subtitle": "Dies ist eine Demo-Website",
  ...
}

Front-end implementation (example, where title and tagline are replaced with their respective value in the translation file):

<h1>{title}</h1> => to render the title text
<p>{tagline}</p> => to render the tagline text

So… What’s the Deal?

From experience building web apps, these translation files (JSON files) can become very large. If we now add a translation for a new key (lets say, a description field), we must copy this key into every single language file (of which there are likely many — one for each language you support).

Keys could be nested, out of order, and may be duplicated unknowingly. In short: this is manual, time consuming, and does not scale!

A Word on Fallback Languages

You may notice in the example above, that our German translation file does not contain a translation for title — which is the same as saying, our translation files are out of sync.

Fortunately, React libraries like react-i18next permit you to specify a default…