Javascript i18n core

ver A.2.1 - MIT License


Single string

Quick Start

import i18n from '/path/i18n.js';
    "resource": "/i18n.json", // Language file's path
    "locale": "en" // Default language key
}).init(function (dict) {
    // do something
    // console.log(this._("key"));
    // or
    // console.log(i18n._("key"));


resource string|object
Language file path or JSON object.
locale string
Language key
i18n_key string
An HTML data-* attribute name which use for Auto Translate to get elements. Defaults to i18n (data-i18n).
i18n_pass string
An HTML data-* attribute name which use for Auto Translate to pass the variables. Defaults to i18n-pass (data-i18n-pass).


Set default language to "English" and get "hello"
let foo = i18n.set("locale", "en")._("hello"); // output "Hi there"
Multiple level
let foo = i18n._("anime"); // output "Anime and manga"
let foo = i18n._("anime.attact on titan"); // output "Attack on Titan"

Variables in string

By object

// Create user object
const user = {
    "name": "John",
    "age": 10

let foo = i18n._("intro", user);
// output "Hi, My name is John. I'm 10 years old."

By arguments

It will replace {...} by sequence number.
i18n._("intro", "john", "10");
// Or
i18n._("intro", ["john", 10]);
// output "Hi, My name is John. I'm 10 years old."

Change language

Set default language (will effects until set again).
let foo = i18n.set("locale", "en")._("hello");
// output "Hi there"
Get specific language without change default language.
let foo = i18n._("tw", "hello");
// output "你好"
let foo = i18n._("hello");
// still output "Hi there"

Auto translate

  • You could use .translate() to make auto translate for i18n elements.
  • Auto translate won't change the default language setting.
<div data-i18n="key">…</div>
<div data-i18n="key" data-i18n-pass="{&quot;name&quot;: &quot;value&quot;}">…</div>
<div data-i18n="key" data-i18n-pass="[&quot;value1&quot;, &quot;valu2&quot;]">…</div>
// Auto translate after initialized.
i18n.set("locale", "en").init(function () {

// Auto translate in event
button.addEventListener("click", function () {
    // Do auto translate into "Traditional Chinese"
    // After translated, It will still output in "English".


Get current datetime in default format.
let foo =;
// output "January 15, 2022 05:00:00"
2024-07-13 17:01:17


pass object to resource
const languages = {
    "en": {
    "jp": {

    "resource": languages,
    "locale": "en"
}).init(function () {
    // this._("jp", "key");

Language file

  • Must be JSON format.
  • The "key" could be any characters but not contains . ' and "
  • The variable's name in "Value" could be any characters and wrapping with bracket { and }.

Download Full Example.

    "Language Key": {
        // "__meta__" is only required for use
        "__meta__" {
            "datetime": "Datetime format",
            "timezone": "UTC offset",
            "day": ["abbr of day"...],
            "days": ["full name of day"...],
            "month": ["abbr of month"...],
            "months": ["full name of month"...]
        // in String
        "String Key": "any characters",
        // in Object
        "String Key": {
            // "_" is the string of the "Parent"
            "_": "any characters",
            "String Key": "any characters",
            "String Key": {
                "String Key": "any characters"