JavaScript localization:
A step-by-step introductory guide

The process of converting your JavaScript code to multiple languages during the internationalization of your project. I18N means to design software in the way it can handle multiple locations, languages or regions.

There are a lot of possibilities out there, but we have definitely the most advanced platform for any use-case of i18n.



This step-by-step-guide helps you to start your software-localization project based on a JavaScript environment.



Table of contents

javascript localization

Prepare your app

locize can be used with any i18n framework. Even with no i18n framework at all, for example with the locizify script.

Example by i18next

Below we will continue with i18next as i18n framework. If you're curious to know why we suggest i18next, have a look at this page.


To have multiple languages on your website or application with , follow the below steps. First install the dependencies, use the following npm package or use a script tag load umd, esm or cjs from unkpg or cdnjs.com CDN. 



# npm
$ npm install i18next --save
 
# yarn
$ yarn add i18next


Localization in JavaScript example

These lines of code give you a brief overview about localization in JavaScript can work and what functions are available in 18next . If you want to use the library for JavaScript production please refer to the detailed instructions of each framework in our resources. There is a much easier integration than with innerHTML.

import i18next from 'i18next';

i18next.init({
  lng: 'en',
  debug: true,
  resources: {
    en: {
      translation: {
        "key": "hello world"
      }
    }
  }
}, (err, t) => {
  // initialized and ready to go!
  document.getElementById('output').innerHTML = i18next.t('key');
});

Check out the i18n getting started guide on the i18next page.

Do you already know i18next?

Then just use i18next-locize-backend as i18next backend.

import i18next from 'i18next';
import Backend from 'i18next-locize-backend';
 
i18next
  .use(Backend)
  .init({
    // ...other options
    backend: {
      projectId: '[PROJECT_ID]',
      apiKey: '[API_KEY]',
      referenceLng: '[LNG]'
    }
  });

Choose your framework

For famous JavaScript frameworks locize is very easy to integrate through the JavaScript localization library i18next.

Watch: i18next Crash Course
javascript localization react

Read the detailed instructions for using react-i18next for your project.



Basic procedure of using React:


  • 1. Installation of i18next package needed
  • 2. Add react-i18next to expand the functionality
  • 3. Add a new file i18n.js inside same directory as index.js
  • 4. Translate the content with "hook", "HOC" or "render prop"

For more detailed instructions on how to properly internationalize a React app, check out this tutorial blog post about React localization.

angular

Read the detailed instructions for using angular-i18next for your project.



Basic procedure of using Angular:


  • 1. Installation of i18next and angular-i18next package needed
  • 2. Import I18NextModule to AppModule
  • 3. Import I18NextModule.forRoot() to App Module
    and setup provider with "init"
  • 4. Use i18next pipe to translate key

To unleash the full power of angular-i18next check out this tutorial blog post about Angular localization.

vue

Read the detailed instructions for using i18next-vue for your project.



Basic procedure of using Vue:


  • 1. Installation of i18next and i18next-vue
  • 2. Initialize i18next
  • 3. Initial setup with app.use(I18NextVue, {i18next})
  • 4. Set up a view

For more detailed instructions on how to properly internationalize a Vue app, check out this tutorial blog post about Vue localization.

As an alternative to i18next-vue, you can try vue-i18n like described in this tutorial blog post.

supported frameworks

There are more supported frameworks like .Net, Next.js, Svelte, Elm and more. Check them out now.


i18next can also be used on server side...
In this tutorial blog post you can check out how this works.

On this page you'll find also non i18next aproaches.

Checklist best practices

These questions will help you to find the best setup to internationalize with JavaScript.

  • For which javascript-environment are you looking for an i18n solution?
  • Do you need a language detector for your environment?
  • Do you want to bundle the translations with your app?
  • Do you want to load the translations separate from your app via http?
  • Do you want to manage your translations with an awesome translation management system?

There is also a more detailed guide for first setup help at i18next directly, which covers also more than just javascript.

Step-by-step code implementation (the manual way)

This process is based on how to implement multiple languages for a sample React app.

For more detailed instructions on how to properly internationalize your project, shown with the help of a React app example, check out this tutorial blog post: "How to properly internationalize a React application using i18next"


  • Install i18next and appropriate framework package
  • Install the browser language-detector
  • Prepare the i18next configuration
  • Translate the content with "hook", "HOC" or "render prop"
  • Create a language switcher
  • Add translations for other languages
  • Use pluralization and interpolation
  • Use packages for date and time formatting with interpolation
  • Use the context function for gender specific translations
  • Separate translations from code, for web applications use i18next-locize-backend


But there is more....

Take a minute and read about automating this process with a smart translation management system below. For extensive projects using just a library may too inefficient.

Automate translation work (the smart way)

Congratulations you have decided to read about a robotic way to switch the language for any type of software. So this is for you. It's awesome which functionalities you can unleash for a small amount of money. Watch our videos and admire what you get from only five USD per month.



Watch: react-i18next and locize

Use the full power of the i18next library together with locize, a localization management platform by the founders of i18next, which can automate the translation workflow in the locize app.

Watch: automatic machine translation

The machine translation feature enables every new content to get automatically translated into all other defined target languages (like Google Translate).

Register for free and unlock everything for a 14 days trial period.

Frequently asked questions

What is JavaScript localization?

Read the introduction to this page about internationalization (also known as i18n) of JavaScript software (client or server side). Localization (also known as l10n) is more about the content. The translator, developer or project manager prepares texts, graphics, sounds etc. so you can target a specific language or region.

How to make my JavaScript app multilingual (open source)?

Use an i18n framework (like i18next) of your choice and instrument your code respectively. Navigate to the detailed checklist to know how to make a JavaScript application multilingual.

What is i18n (internationalization)?

Software products are primarily prepared for your main-market and -language. During the internationalization of a software product new market targets will be added. Adjusting your software to handle this new markets with languages, locales and regions is called i18n process. Learn more about internationalization and what is used for in our complete guide with the title "what is i18n".

How can I have multiple languages on my website?

Decide which JavaScript framework to use. Then install the i18next npm-package and next add the "i18next.init" code to your application. Follow the JavaScript example to take your first steps with i18next. Or just read our article about website localization.

Now it's your turn

We hope this step-by-step-guide was helpful... Best for javascript localization is to start with the best practices questions we provided above. There are several methods to choose from in order to successfully localize your project with JavaScript: First of all, if you only need to switch the language for an application, it might be easier to use a javascript translation library like i18next or our locizify script. If you have a huge project with various components to be internationalized and you want to keep up with time, then it might be a good opportunity to use a complete translation management solution like locize.


Since we're offering you a free 14-day trial for locize, there might be a good chance to test all included features anyway. Register now for the free trial period and start your best experience with localizing an application.

Or if you can't make the decision to register right away, visit our website localization service page for more information on how to manage website-localization.


If you decide that you do not need a translation-management, you should follow the guides and video instructions for the specified framework (react, angular or vue).


In any case the javascript-library to choose is "i18next" because of the following properties:


  • Richness (splitting translations to multiple files, string interpolation, plugins for detect language)
  • Maturity (for any use-case)
  • Extensibility (for all modern javascript framework, jquery, laravel and more).

Now we like to invite you to share that to any developer, project manager or business this would help.

Recommend our step-by-step-guide on