4 Essential JavaScript i18n Libraries You Want to Use in 2023
What are JavaScript i18n libraries and frameworks?
I8n libraries and frameworks are tools that help developers create applications that can easily adapt to different languages, regions, and cultures. These tools facilitate the management of language-specific content and formatting, making it easier for developers to create and maintain multilingual applications.
As the name indicates, in our case we will focus on JavaScript i18n libraries. That being said, there are other options available.
What is i18n?
I18n, short for “internationalization,” is a process that involves designing and developing software applications to support multiple languages and cultural settings. Internalization is an important part of software development for businesses that seek to expand their products to markets that speak different languages.
However, with internalization comes tedious coding (pluralization, formatting, etc.). For this reason, many apps and websites rely on frameworks that have all the complex features required to internationalize them.
Why use Javascript i18n libraries and frameworks?
Because they generally make it easier for developers to integrate certain functionalities into their software, apps, or websites. For internalization, it is vital to look for frameworks that support the following features:
- Pluralization.
- Interpolation.
- Context.
- Formatting.
Let’s briefly explain each and why they are useful.
Pluralization
Support for pluralization means that you can modify parts of a string according to the number passed as a parameter. Various languages have different forms for zero, one, and multiple, and the noun can be before or after the count. For example:
{
"key_one": "{count} item", // `count` is the parameter.
"key_other": "{count} items"
}
If you pass 1 in the count parameter, then it should read 1 item, and the item should change to items when a value greater than 1 is used. That, however, is simple for English pluralization. What about languages with more forms of plurals concerning the number in use? By relying on the proper framework, this issue is handled adequately, and you do not have to reinvent the wheel.
Interpolation
Support for interpolation means that you could pass dynamic values into strings. For example, in the code shown above,
count takes a dynamic value which could be any number.Context
Support for context allows you to pass in extra information to be used when translating strings. You can differentiate translations based on the context. For example:
{
"dessert": "I like all desserts",
"dessert_cake": "I like to eat cake",
"dessert_muffin": "I like to eat muffin"
}
This is what it would look like when used (assuming the t(…) function translates the string passed in it):
t('dessert'); // -> "I like all desserts"
t('dessert', { context: 'cake' }); // -> "I like to eat cake"
t('dessert', { context: 'muffin' }); // -> "I like to eat muffin"
The 4 JavaScript i18n libraries and frameworks.
Several frameworks have been built for developers to support internationalization in their applications.
- I18Next: An i18n-framework written in and for JavaScript. It goes beyond supporting standard i18n features and has several plugins and utilities ready for use.
- Polyglot: A lightweight I18n helper library built by Airbnb and written in JavaScript. It provides a simple solution for interpolation and pluralization.
- Format.js: A modular collection of JavaScript libraries for internationalization that supports formatting numbers, dates, and strings. It includes a set of core libraries that build on the JavaScript Intl built-ins and industry-wide i18n standards.
- Globalize.js: A JavaScript library for internationalization and localization that leverages the official Unicode CLDR data, which is the largest and most extensive standard repository of locale data available. It keeps code separate from i18n content.
A brief comparison
Now that we have a list of i18n frameworks and libraries, let’s compare them.
Pluralization, interpolation and formatting
All the frameworks support and handle pluralization properly. Format.js uses ICU message format for translations, while I18next has a plugin that uses ICU format. They also all support interpolation.
I18next, starting with I18next>=21.3.0, has built-in formatting functions based on the browser’s Intl API, and Format.js also relies on the Intl API. On the other hand, Polyglot has no built-in formatting support. That is left to the developer to handle it.
Supported frameworks
One thing you should check when choosing a library is if it supports the language or framework you’ve used in your code.
I18Next |
Format.js |
Polyglot.js |
|
|
|
🔔
The I18Next list is not maintained officially but rather by the contributions of the I18next community. In the case of an issue (or to see its usage), you should consult their GitHub pages.
Loading translations
I18Next comes with a range of plugins for loading translations. They enable loading translations from:
- Servers;
- File systems;
- Bundling translations from Webpack.
For Format.js and Polyglot, developers have to write code to load or bundle the translations into their web apps.
Downloads stats
Below is a summary of the downloads of the JavaScript i18n libraries, and I18next is currently the most downloaded framework. Due to its fantastic community, it enjoys quite the popularity.
Summary
JavaScript i18n libraries and frameworks support the most complicated features that would otherwise need to be implemented by a developer. They save you a lot of time and effort.
We recommend the I18next due to its popularity and frequent updates. But the one that fits you best depends on your project requirements. We encourage you to take some time to learn about them carefully before picking the right one.
John Curtis
As an experienced full-stack developer, John is our in-house localization engineer, dedicated to facilitating the localization process for our clients.
