The Simplest I18n JS Framework is here! Meet Ultimate I18n JS

The internationalization for web apps was a nightmare until now. Say hello to the Ultimate I18n JS!

🚀 Three Steps

First step. Add the Ultimate I18n JS to your <head> section as the first script on your page.

<script src="https://cdn.jsdelivr.net/npm/ultimate-i18n-js@0.0.3/lib/index.min.js"></script>

Second step. Set your default language code in the <html> tag.

<html lang="en">

Third step. Add translations by setting the i18n-[LANG_CODE]="" attribute to any element on your page.

<h1
i18n-pl="Witaj świecie"
i18n-es="Hola Mundo">
Hello World <!-- Your default language (en) -->
</h1>

That’s it! 🤯 Your page is multilingual now!

The library will automatically detect a user’s language and display a right translation.

To manually change the language call the set method on the UltimateI18n object.

<button onclick="UltimateI18n.set('en');">EN</button>
<button onclick="UltimateI18n.set('es');">ES</button>
<button onclick="UltimateI18n.set('pl');">PL</button>

The library remembers that choice. After the page is reloaded a user still sees a chosen language.

⚒ Module Bundlers

You may use the Ultimate I18n JS with Webpack or a similar bundler. To install the package execute the below command.

npm install ultimate-i18n-js

Now you need to call the setup method before render your app.

import * as UltimateI18n from 'ultimate-i18n-js';UltimateI18n.setup();document.addEventListener('DOMContentLoaded', () => {
document.getElementById('placeholder').innerHTML = `
<span
i18n-pl="Kocham czerwony"
i18n-es="Amo el rojo">
I love red
</span>
`;
});

That’s it! 🤯

🤩 Demos

Check these online demos:

--

--

Developer - https://n4no.com/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store