Software localization

The Best JavaScript I18n Libraries

Before you start translating pure JavaScript apps, you need to find out what tool best suits your needs. Here are the best JavaScript i18n libraries to consider.
Software localization blog category featured image | Phrase

JavaScript land is a wonderful place to be: There are many prebuilt solutions for every general problem. Internationalization (i18n) is no different, of course: There are quite a few pre-made JavaScript i18n libraries to choose from. Some are comprehensive, others smaller and more focused. And, of course, you have to consider your UI framework—React, Vue, Angular, etc.—and whether your chosen i18n library supports it well.

We’ve been writing about JavaScript i18n libraries for years, and we’ve used quite a few of them. So in this article, we will try to turn some of that sage wisdom into practical rating criteria for you, so you can choose the best one for your needs.

We’ll cover popular and general i18n libraries like:

  • i18next
  • FormatJS
  • Globalize
  • Polyglot

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.

🔗 Resource » The hands-on in Ultimate Guide to JavaScript Localization gets into the how-to JavaScript i18n both from scratch and using some libraries.

Comparing libraries

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.

i18next

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.

🗒️ Note » Vue has its own first-party i18next wrapper as well. However, the Vue community tends to prefer the Vue I18n library. We’ll cover Vue I18n a bit later.

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.

However, if you’re working on an app that will scale and you anticipate your i18n needs changing as the app grows, i18next is an easy recommendation. 3.5 million downloads per week, a rapid GitHub commit rate, and very good documentation help make i18next the go-to JavaScript library for many developers.

If you’re interested in hands-on i18next guides, here are some we’ve written:

FormatJS (react-intl)

While i18next is excellent for many apps, its ICU support is via an add-on pluginFormatJS, 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

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.

A current downside to Vue I18n is its lack of out-of-box support for complex plurals (for languages like Arabic, Russian, etc.). The library does provide a way for you to inject your own custom plural logic, so it’s relatively easy to add complex plural support yourself using JavaScript’s Intl.PluralRules.

🔗 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.

With nearly 1M downloads per week, robust documentation, and a steady stream of updates, Vue I18n currently holds the crown for the go-to i18n Vue library.

Here are some of our step-by-step guides for Vue I18n:

@angular/localize

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.

Globalize

Not to be confused with the de facto Ruby on Rails i18n library, Globalize.js is a JavaScript i18n library that has been around for some years. Globalize is an ICU-first library and even has support for the standard Unicode CLDR (Common Locale Data Repository).

🗒️ 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.

Full ICU and CLDR support means that using Globalize offers formatting for many languages without you having to provide it÷numbers, dates, plural rules and more are just there for you to use. That said, similar support now exists natively in JavaScript Intl objects.

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.

Polyglot

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.

🔗 Resource » We cover how to use Polyglot in our Ultimate Guide to JavaScript Localization.

jQuery.i18n

While not the unrivalled champion of JavaScript libraries it once was, jQuery is still used in many applications today. The library enjoys a staggering 5.5M weekly downloads at the time of writing. So we would be remiss to exclude the stalwart’s most prominent i18n offering, jQuery.i18n.

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

That’s it for our roundup of some of the best JavaScript i18n libraries currently in town. We hope you’ve found it helpful.

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.