We’ll cover popular and general i18n libraries like:
While some of these general-purpose libraries support React, Next.js, Vue, and Angular, we’ll also look into framework-specific libraries like Vue I18n and @angular/localize. We’ll even cover jQuery.i18n, which of course targets the stalwart jQuery DOM library.
When deciding which JS i18n libraries are “the best,” we looked at a few criteria. Any i18n library worth its salt needs to have string translation and interpolation, so these were a minimum for making our list, but we also looked at the following:
- Framework integrations (React, Vue, Angular, etc.)
- Quality of documentation
- Frequency of updates
- Downloads per week (according to NPM)
- Bundle size (according to Bundlephobia)
We also looked at some advanced features:
- Complex plural support for languages like Arabic and Russian
- Localized number and date formatting
- Message extraction: the ability to create a base translation file automatically from your code
- ICU (International Components for Unicode) standard syntax support
🤿 Go deeper » “What’s ICU?” you may be wondering. No fear: The Missing Guide to the ICU Message Format has you covered.
Let’s dig into each of these libraries and discuss their strengths and weaknesses, why you might want to use them, and where you can learn more about them.
A few notes
- All frameworks support basic message translation and interpolation.
- While some of the libraries covered here support Node.js i18n, we’re primarily focused on browser i18n in this article.
- We’ve used NPM bundle sizes from Bundlephobia as part of our rating criteria. These sizes do not account for tree shaking. And some libraries have developer tooling that wouldn’t normally get bundled in your production builds. So our recommendation is to try out the library you like and see what the actual production bundle weighs in for you. Take the bundle sizes in this article as a relative comparison metric.
The Swiss Army Knife of i18n libraries, i18next can do it all. With a massive collection of first- and third-party plugins, almost any i18n problem you face has a pre-built solution with i18next. From detecting the user’s language to loading and caching translation files, and much more, i18next is truly a “complete i18n solution”.
i18next is unmatched in its breadth of supported frameworks. While you can use the library with vanilla JS, i18next has excellent React integration via the first-party react-i18next add-on. First-party integrations for Next.js, and jQuery are available as well.
So what’s the catch? Well, i18next has a large bundle size, coming in at 56.3 kB minified and 14.8 kB minified + gzipped. So if you’re building a tiny app and you just want basic translation messages, something like Polyglot, which we’ll cover later in this article, might be a better fit for you.
If you’re interested in hands-on i18next guides, here are some we’ve written:
- A Guide to React Localization with i18next
- Angular Tutorial on Localizing with I18next
- Deep Dive: Vue Translation with vue-i18next
- Localizing SolidJS Applications with i18next
- Localizing StimulusJS Applications With I18next
While i18next is excellent for many apps, its ICU support is via an add-on plugin. FormatJS, on the other hand, has first-class ICU support. ICU isn’t necessary for app localization, but it’s a robust industry standard: Your developers and translators might already be familiar with ICU. If that’s the case FormatJS might be a good fit for you. Indeed many big organizations like Dropbox and Mozilla use FormatJS for their JS i18n.
While FormatJS seems to work with vanilla JS, its excellent first-party React integration, react-intl, is how it’s often used today. At 1.2 million downloads per week, react-intl is one of the most popular React i18n libraries in the world, second only to react-i18next.
🗒️ Note » Vue 3 has its own FormatJS integration, vue-intl. Although again, vue-intl’s popularity pales against that of Vue I18n. We’ll cover Vue I18n a bit later.
FormatJS has serviceable if subpar documentation. You might have to jump around the docs a bit to get your footing. That said, if you’re using FormatJS with React, the documentation’s Getting Started Guide should get you going.
🔗 Resource » If you want a more in-depth guide, A React I18n Tutorial with FormatJS should do the trick.
Nor does FormatJS present itself as a “complete solution” like i18next. Things like translation file loading and user language detection are left up to you. From our experience, these solutions are relatively easy to build, so not having them is no dealbreaker.
FormatJS seems to position itself as an “enterprise” JS i18n library. What it lacks in a plugin ecosystem it more than makes up for with its tooling and its accommodation for TMS (translation management systems). Its first-party CLI can extract messages from within your UI code and create a translation file for your translators. It’s also being actively developed, which makes it a stable long-term tech investment.
And while react-intl has a largest bundle size, weighing in at 62.8kB minified (17.8kB minified + gzipped), the features and dependability on offer by the library make up for this.
So if you’re new to i18n, or if you have a small app that will stay that way, FormatJS might be a bit too much for you. However, if you’re working with a large team and want comprehensive ICU support and good tooling, FormatJS could be just the i18n library you’re looking for.
Vue I18n is, of course, for all you Vue devs. While Vue is supported by the aforementioned i18next and FormatJS, Vue I18n far exceeds them in popularity. This is probably due to Vue I18n being feature-rich and Vue-first: The library works seamlessly with Vue’s Options and Composition APIs.
While Vue I18n checks off all the i18n basics without too much feature bloat, it does come in at a hefty 63.8 kB minified (18.9 kB minified + gzipped). That might be an acceptable amount of kilobytes for you given the Vue-friendliness of the library, however.
🔗 Resource » Our Ultimate Vue Localization Guide dives deep into installing and using Vue I18n in your own projects, including how to add complex plural support yourself.
Here are some of our step-by-step guides for Vue I18n:
- The Ultimate Vue Localization Guide (Vue 3)
- Vue 2 Localization with Vue I18n: A Step-by-Step Guide (Vue 2)
Angular developers have a scalable UI framework with so many built-in features, and these include the first-party @angular/localize i18n package. The library works seamlessly with Angular but does require a significant amount of setup. Once you do set it up, however, you get a very robust i18n library, especially for larger teams. @angular/localize does nearly everything i18n, including ICU messages and complex plurals.
🔗 Resource » We walk through @angular/localize setup step-by-step, as well as cover the ins and outs of using the library, in The Ultimate Guide to Angular Localization.
@angular/localize works with message extraction by default. Strings are simply decorated in place in your components and Angular then scans your code and extracts a base language file for you. This file can then be uploaded to a TMS (translation management service) like Phrase, ready for your translators to work with.
Once you get your various translated language files back from your translators, Angular builds a separate version of your app for each supported language. This is certainly different from how other i18n libraries work and comes with a trade-off. Testing different languages during development can be a bit clunky, although some workflow additions help (we cover these in our guide). On the flip side, since translated strings are baked into each app build, i18n comes at virtually no performance cost.
@angular/localize is also the smallest package of all the i18n libraries we’ve covered here, bundling at 4.6 kB minified (1.9 kB minified + gzipped). This may be because the library simply extends core Angular, and a lot of its functionality may rely on other parts of Angular. Anyway, because translations are simply added to language-specific app versions at build time, there should be a minimal bandwidth impact in production.
The library has 766 thousand downloads per week at the time of writing, sports very good documentation, and is receiving steady updates. This on top of being a first-party Google offering means @angular/localize is likely a solid foundation for your long-term, scalable Angular projects.
🗒️ Note » If you’re looking for a lightweight i18n alternative, ngx-translate is another favorite among Angular devs.
🔗 Resource » For a roundup of Angular-specific i18n libraries, read The Best Angular Libraries for Internationalization.
🗒️ Note » CLDR is the official Unicode collection of localization data. For a given locale, like pt-BR (Brazilian Portuguese), CLDR can give you its script, preferred calendar, number system, date formats, pluralization rules, and more.
Globalize is modular and flexible; use the bits that you want for your app and leave the rest. This does make the library a bit clunky to use, however, since sometimes you need to configure modules manually if you need them.
And when you include all of its modules, Globalize comes in at a massive 71.1 kB minified (22.2 kB minified + gzipped). Of course, given the library’s modular nature your app might build a smaller configuration of the library for production.
Another concern is that Globalize doesn’t receive frequent updates. However, the library is older than its counterparts, and that can come with maturity and stability that forgive the need for a feverish update cycle. And the library is still getting nearly 200 thousand downloads per week. So we’ll let you weigh the pros and cons here.
While using Globalize, we found its documentation reasonable, if requiring some jumping around to put the pieces together.
The decision of whether to use Globalize or not might come down to your need for CLDR support. If you need full CLDR, Globalize might be a good fit for your project. If you don’t need it — and if you don’t know what CLDR is you probably don’t — then modern libraries like i18next or FormatJS might be a better fit for you.
🔗 Resource » Learn how to use Globalize in your projects from our guide, JS I18n with Globalize.js.
Airbnb’s Polyglot.js is the most focused general-purpose i18n library in this list. Polyglot does two things: it handles translation messages and plurals, including complex plurals. Number and date formatting along with other features are left up to you.
This makes Polyglot perfect for projects that need the bare minimum i18n without feature bloat. The library comes in at 35.5 kB minified (10.5 kB minified + gzipped), making it one of the smaller offerings we’re covering.
And while Polyglot isn’t receiving updates at the same rate as more active libraries listed here, it’s small and mature enough that perhaps it doesn’t need to. And of course, being a product of Airbnb means that some smart engineering is behind the library.
Polyglot also has good documentation, enjoys 184 thousand downloads per week, and even has a third-party React wrapper. So if want a lean i18n library that just gives you the basics, Polyglot might be a good choice for you.
Much like other i18n solutions, jQuery.i18n uses translation JSON files for your language messages. It also allows for switching languages without refreshing the page. CLDR is used for plurals and genders, which means the library supports complex plurals. jQuery.i18n doesn’t seem to cover number or date formatting, however, so those are left up to you.
We couldn’t get any NPM download data for jQuery.i18n; it isn’t installed directly via NPM. However, Wikimedia—the people behind Wikipedia—created jQuery.i18n, so a larger organization is behind the library. And while it doesn’t look to be receiving very frequent updates, jQuery and its ecosystem are old and mature, so the updates it does receive may be enough to keep the library healthy. jQuery.i18n also enjoys good documentation.
If your application is using jQuery and you’re looking for a quick, robust i18n solution, give jQuery.i18n a try.
🔗 Resource » Read our Comprehensive Guide to Using the jQuery.i18n Library for a deep dive on using the library in your own projects.
Bye for now
If you’re looking to take your localization process to the next level, take a look at Phrase. Phrase supports myriad translation file formats, including ICU. With its CLI and Bitbucket, GitHub, and GitLab sync, your i18n can be on autopilot. The fully-featured Phrase web console, with machine learning and smart suggestions, is a joy for translators to use. Once translations are ready, they can sync back to your project automatically. You set it and forget it, leaving you to focus on the code you love.
Check out all Phrase features for developers and see for yourself how they can streamline your software localization workflows.
Last updated on November 22, 2022.