Have a great app? Perfect. Now let’s help the whole world use it.
You’ve built your JavaScript app. It works well, it looks great, but what happens when someone in Japan, Germany, or Brazil opens it and finds everything in English? That’s where localization and internationalization come into the picture.
In this guide, we’ll talk about what software internationalization and localization really mean, and how you can use JavaScript frameworks and libraries to make your app truly global.
We’ll walk you through different tools (from Globalize to i18next and FormatJS) and show you how they work, where they shine, and how to get started.
What is Localization and Internationalization?
Before we jump into code or libraries, we need to understand the basic concepts.
Localization is the process of adapting your software for a specific region or language. This is not only translation; localization also involves adapting both the language and the culture of the end user, including elements like design, graphics, and user experience, to make your application feel natural for the target audience.
Internationalization, on the other hand, is the process of designing your software so it can be easily localized later.
Internationalization (i18n)
This is all about preparing your app to support multiple languages, time zones, currencies, and cultures. Think of it like laying the groundwork—you’re building your app in a flexible way so that localization is easy later.
For example:
● You don’t hard-code dates, text, or currency symbols
● You store all strings in one place
● You make sure your app supports RTL (right-to-left) text, like Arabic
Localization (l10n)
This is the actual translation and cultural adaptation. Once your app is internationalized, localization means translating strings, changing date formats (like DD/MM/YYYY vs MM/DD/YYYY), and maybe even swapping images or colors to match a region’s preferences.
In short:
● Internationalization = preparation
● Localization = execution
Now let’s look at how JavaScript fits into this.
JavaScript Translation and Localization Solutions
JavaScript powers a huge chunk of modern apps—especially SPAs (Single Page Applications). But translating JS apps isn’t as simple as using if(lang == ‘en’) blocks everywhere. That quickly turns into a nightmare.
Instead, developers use specialized libraries and frameworks that handle the heavy lifting.
Some of the most popular ones include:
● Globalize
● i18next
● Polyglot.js
● FormatJS
● Lokalise (as a platform to manage translations)
Beyond individual libraries, many teams now rely on a localization platform to streamline the process of making digital content multilingual. These platforms often include advanced translation management features, supporting both file-based and fileless approaches. A translation management system (TMS) can facilitate the extraction, synchronization, and integration of translations, either by uploading files or by connecting directly to your codebase for seamless updates. Using a cloud based localization stack, such as an SDK or CDN integration, allows developers to push and pull localization content directly, improving workflow efficiency and making it easier to manage multi-language content in JavaScript projects.
We’ll explore each of these, but first, how do you set up your app to even begin localizing?
Setting Up the Project for JavaScript Localization
No matter which library you choose, you’ll want to:
Store Translations Externally
Store all user-facing text in external JSON or YAML language files, organized by locale (e.g., en.json, fr.json). This approach, known as file based localization or file based translation, keeps your code clean and makes it easy to manage translation messages. By separating content from logic, you can add new languages simply by creating new language files, without modifying your core codebase. This also allows for easier collaboration with translators and integration with localization platforms.
Organize and Load Locale Files
Organize your locale files in folders or namespaces (e.g., locales/en/translation.json). Use the JSON format to store translation messages, which makes it straightforward to fetch and update content dynamically. This structure supports scalable localization as your project grows.
After organizing your translation content, extract it into an extracted json file (source file) and upload the file to a localization platform like Transifex. You can upload your source file manually or have a demo file automatically added when creating a file-based project. Once translations are complete, go to your project’s language tab, select the file, and download the translated file for each locale. Save each file with the correct locale name and integrate it into your app for dynamic language switching.
Implement Language and Locale Switching
Implement a language switcher or locale switcher in your UI to let users select their preferred language. Set a default locale and a fallback language (fallbackLng) for missing keys. This enhances the localization experience and ensures your app remains functional even if some translations are missing.
Support Automatic Detection and Flexible Layouts
Use a language detector plugin for automatic locale detection based on the user’s browser settings. Always set the HTML file’s lang attribute correctly to help web crawlers and assistive technologies. Support RTL layouts early in your design for languages like Arabic and Hebrew, and ensure UI elements are flexible to accommodate longer translated text. Avoid using flags to represent languages, as languages can span multiple countries. Use named placeholders in your translation messages to allow translators to adjust variable placement, and leverage the Intl object (e.g., Intl.NumberFormat) for locale-aware number and currency formatting.
Localization Project Checklist:
● Define target locales and languages
● Audit all user-facing content for translation
● Identify technical requirements (e.g., file formats, libraries, platform integration)
● Plan resource timelines for translation, review, and implementation
By following these best practices and using file based localization with language files, you can efficiently manage translations, support new languages, and provide a better user experience.
1. Externalize your text
Don’t hard-code labels like “Welcome” or “Price” in your app. Instead, move them into a separate file like:
{
“welcome”: “Welcome”,
“price”: “Price”
}
This way, you can create a version of this file for every language.
2. Organize translations
Use folders or namespaces to keep things clean:
/locales
/en
common.json
/fr
common.json
3. Set a default language and fallback
Your app should know which language to load first and what to fall back to if something’s missing.
4. Detect user language
Use browser settings or location to auto-detect the preferred language.
Once that’s ready, it’s time to choose your tool.
Understanding the Intl Object in JavaScript
When it comes to javascript localization, the Intl object is a built-in powerhouse that helps your app speak the language of your users, not just in words, but in numbers, dates, and currencies too. The Intl object provides a suite of APIs designed to format data according to the conventions of a specified locale, making it an essential tool for delivering truly localized content.
With the Intl object, you can easily display dates, times, numbers, and currencies in a way that feels native to users from different regions. For example, the same number can appear as “1,234.56” in the US, “1.234,56” in Germany, or “1 234,56” in France—all with just a few lines of code.
Here’s a quick look at how you might use the Intl object for localized number formatting:
const number = 1234567.89;
// Format number for US English
console.log(new Intl.NumberFormat(‘en-US’).format(number)); // 1,234,567.89
// Format number for German
console.log(new Intl.NumberFormat(‘de-DE’).format(number)); // 1.234.567,89
// Format currency for Japanese Yen
console.log(new Intl.NumberFormat(‘ja-JP’, { style: ‘currency’, currency: ‘JPY’ }).format(number)); // ￥1,234,568
The Intl object also supports date and time formatting, pluralization, and even sorting strings according to locale-specific rules. This means you can ensure your JavaScript app not only translates text, but also respects the cultural context of your users.
By leveraging the Intl object alongside your translation files and localization libraries, you can create a seamless experience for users in multiple languages and regions. Whether you’re building a simple html page or a complex javascript project, the Intl object is a key part of any modern javascript localization guide.
JavaScript Translation and Localization with Globalize
Globalize is a powerful library built on top of the Unicode CLDR (Common Locale Data Repository). That means it comes packed with locale data like date formats, currencies, plural rules, and more.
When implementing JavaScript localization, you can also use vanilla JavaScript to achieve similar results without relying on external libraries. This involves locale detection by checking the user’s preferred locale, typically using the browser’s navigator.language property. You can set the active locale in your code, for example, with const locale = navigator.language || ‘en’;, and use the language code to retrieve data from locale-specific JSON files. This process allows you to load data and fetch translations asynchronously, ensuring that language localized content or specified language localized content is displayed based on the user’s settings.
Here’s a simple example of loading translations asynchronously in vanilla JavaScript:
const locale = navigator.language || ‘en’; // Detect user’s preferred locale
async function fetchTranslations(languageCode) {
const response = await fetch(`/locales/${languageCode}.json`);
const translations = await response.json();
return translations;
}
fetchTranslations(locale).then(translations => {
// Pull localized content and update the page with language localized content
document.getElementById(‘greeting’).textContent = translations.greeting;
});
This approach demonstrates data retrieval and pulling localized content for the active locale. By using vanilla JavaScript, you can manage loading translations asynchronously, retrieve data, and dynamically update your webpage with the appropriate specified language localized content.
Additionally, the browser’s native API provides the Intl object, which developers can leverage for formatting dates and numbers according to the user’s locale, further enhancing the localization experience.
Why use globalize?
● Built for accuracy
● Great for number/date formatting Maintains performance in large apps
Example Usage:
import Globalize from “globalize”;
Globalize.locale(“fr”);
console.log(Globalize.formatNumber(123456.789)); // Outputs: 123 456,789
It’s especially useful if your app needs complex formatting (like currencies or units) that differ by region. But it doesn’t handle translation strings on its own, you’ll still need another tool for that.
Streamlining JavaScript translation with I18next
i18next is one of the most popular and flexible libraries for localizing JavaScript apps. It helps manage translatable strings and localized messages, supporting translation management through integration with a translation management system. i18next is versatile for any JavaScript environment, including plain JavaScript, React, Vue, or even Node.js. You can use a language detector plugin to automatically serve the user’s preferred language and set a fallbackLng for missing keys, ensuring seamless message formatting and translation updates.
Key Features:
● Loads JSON translation files
● Supports nested keys, pluralization, and fallback languages
● Integrates with React (via react-i18next)
● Language detection plugin
Why people love i18next:
It’s simple to start with, but powerful enough to scale for big projects.
Example Usage:
i18next.init({
lng: “en”,
resources: {
en: { translation: { welcome: “Welcome” } },
fr: { translation: { welcome: “Bienvenue” } },
},
});
console.log(i18next.t(“welcome”)); // Output: Welcome
You can even use it in your HTML:
<h1 data-i18n=”welcome”></h1>
i18next is a great choice for most apps, especially if you’re building something interactive and user-facing.
JavaScript Localization with Polyglot.js
For something lightweight, Polyglot.js.
It’s not as full-featured as i18next, but for simple apps or prototypes, it does the job.
Best for:
● Small apps or browser extensions
● Quick projects
● Sites that don’t need formatting or complex plural rules
Sample Code:
var polyglot = new Polyglot();
polyglot.extend({
“hello_name”: “Hello, %{name}”
});
console.log(polyglot.t(“hello_name”, { name: “Alex” }));
// Output: Hello, Alex
Setup is minimal, plug it in and start translating right away.
JavaScript Localization and Message Formatting with FormatJS
FormatJS is a family of libraries, and its most well-known part is React Intl. It’s a favorite for React developers who need strong support for message formatting and pluralization, as well as solid support for time zones, currencies, and formatting messages. FormatJS is optimal for React because of its advanced handling of language rules, including pluralization. Pluralization rules vary by language, so it’s important to use libraries that support ICU MessageFormat to manage these rules effectively.
What it offers:
● ICU Message syntax
● Rich formatting (dates, numbers, plurals)
● Easy integration with React
● Locale data from CLDR
Example with React Intl:
<IntlProvider locale=”en” messages={{ greeting: “Hello {name}” }}>
<FormattedMessage id=”greeting” values={{ name: “Sara” }} />
</IntlProvider>
It’s not limited to React, but that’s where it really shines. If you’re building a global product in React, FormatJS is a strong pick.
Translate JavaScript Apps with Lokalise
Writing translations by hand works fine at a small scale, but once you have 10 languages and 500 strings to manage, it becomes unmanageable. That’s where platforms like Lokalise, a translation management system, become lifesavers by streamlining translation management for large-scale projects.
For large-scale projects, using translation management systems such as Lokalise, Crowdin, or Transifex helps manage translation workflows efficiently and enables collaboration with native speakers.
What Lokalise does:
● Centralizes your translation files
● Helps teams collaborate (devs + translators)
● Integrates with i18next, FormatJS, and more
● Syncs with GitHub, GitLab, Figma, and Slack
Instead of emailing .json files back and forth, your translator just logs into Lokalise, makes the updates, and it’s synced to your repo automatically.
If your app is growing and you need serious workflow help, Lokalise is worth considering.
Translate and Localize JavaScript Frameworks
Not using plain JavaScript? No problem.
To effectively localize your application, it’s important to properly configure both your html file and javascript file. Start by including the necessary localization libraries or SDKs in your html file using the script src attribute within the <script> tag. This ensures that the localization features are available to your JavaScript code. In your javascript file, you can then add localization logic, configurations, and translatable content as needed.
Here’s how localization looks across some common JS frameworks:
React:
● Use react-i18next or React Intl
● A component-based structure makes it easy to plug translations per component
Vue.js:
● Use vue-i18n
● Supports lazy loading and dynamic messages
Angular:
● Built-in i18n support
● Uses XLIFF or JSON for translations
Next.js (React-based):
● Offers built-in internationalized routing
● Works well with i18next or FormatJS
The key idea? Each framework has its own way, but the principles of internationalisation remain the same.
Conclusion: Go Global the Smart Way
Localizing your JavaScript app isn’t just a nice-to-have, it’s essential if you want to connect with users across the globe.
Whether you need lightweight tools like Polyglot.js, scalable solutions like i18next, or advanced formatting with FormatJS, the JavaScript ecosystem has something for every need.
For managing hundreds of strings across languages without losing control, platforms like Lokalise make that possible without slowing you down.
Final Tip
Start with internationalization from day one. It saves you from a big, messy rewrite later.
FAQs
Q1. What’s the difference between internationalization and localization?
Internationalization is the prep work, structuring your code to support multiple languages. Localization is the actual process of translating and adapting for specific regions.
Q2. Do I need a library for small projects?
If you have a tiny app with only a few strings, a small tool like Polyglot.js is enough. But for anything larger, a proper library (like i18next) saves time and headaches.
Q3. What about right-to-left languages?
Libraries like i18next and FormatJS support RTL out of the box. Just make sure your CSS and layout also handle RTL properly.
Related Articles:
– Breaking Format Barriers: Linguidoor Translates Audio, PDFs, JSON, and More