/vanilla-js-i18n-translator

Super-fast, minimal, pure vanilla JS i18n translator

Primary LanguageJavaScriptMIT LicenseMIT

Vanilla JS i18n translate

Super-fast, super-minimal, super-easy. Super 🚀

🤝 Features

  • Loads near-instantly; No "flashes" of default content to user
  • Detects users' language automatically, and applies translation if supported
  • Able to set a default/fallback language if users' language is unsupported
  • Able to force a locale via ?lang=en if you need to
  • Able to run JavaScript code as variables replacements from HTML file

🛠 How to use

  1. Include your i18n.js file in your HTML file, at the bottom, after your closing </body> tag;
<script src="i18n.js"></script>
  1. For each piece of text you need translations for, use data-i18n HTML attribute to specify a unique key, which will reference a key/value pair in the i18n.js file. You can use dot-notion if you wish. Eg;
<h1 data-i18n="header.title"></h1>
  1. Within your i18n.js file, setup the availableLocales and defaultLanguage variables with your desired locales.
  2. Also in i18n.js file, within locales variable, you can start building-out each of your locale translations as an object. Eg;
const locales = {
  en: {
    "header": {
      "title": "English title",
    },
  },
  de: ...
};

✨ Variable replacements

If desired, you can inject variables from your HTML file into the translation strings. This can be setup by using variables in your locales string such as {example}, then specifying a data- attribute to match in your HTML file, such as data-example="Hello World".

This [somewhat] supports JavaScript code injection as well (without evil eval❗️) See index.html for examples.