Skip to content
This repository has been archived by the owner on Jul 26, 2020. It is now read-only.


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

ko-fi License: MIT

Lightweight, easy to use and lightning fast language changer for infinite languages!

Don't waste any time coding complex language changing code in JS, just add a few attributes to your HTML elements instead!

Demonstration on this page


1. Put this in your document header:

<script src=""></script>

2. (optional) Set a default language on your element:

<body data-default_lang="YOUR_LANG_CODE">
<!-- I recommend using a sequence of chars before the lang code (for example: __EN), because it may conflict with your specified content otherwise -->

How to use:

1. Add the class langapp to every element that needs to be affected by the language change

<div class="langapp"></div>

2. Add the needed attributes to change specific things of the element

<!-- in this example __EN and __DE are my language codes -->
<!-- when the language change function gets called it will search for that code -->
<!-- here's how to use it: -->
<!-- (you can also stack the attributes to change multiple things at once) -->

<div class="langapp" data-lang_content="__EN°English Content|__DE°German Content">
<!--(this affects the innerHTML of the element)-->

<div class="langapp" data-lang_title="__EN°English Content|__DE°German Content">
<!--(this affects the title attribute of the element)-->

<img class="langapp" data-lang_src="__EN°|__DE°">
<!--(this affects the src attribute of the element)-->

<!-- the same thing can be applied to the onclick, href and placeholder attributes using "data-lang_onclick", "data-lang_href" or "data-lang_placeholder" respectively -->

Syntax (remove spaces): LANG1_CODE ° LANG1_CONTENT | LANG2_CODE ° LANG2_CONTENT (you can add infinite languages)

3. Switch between languages


4. If you want to trigger a function once the language was changed, use an event listener like this

document.addEventListener("lang_change", yourFunction);

5. The document's lang dataset contains the currently selected language so you can read it like this

var xy = document.body.dataset.lang;

6. If you want to disable the watermark in the console, add this to your document header

<meta id="langapplier_disable_watermark">

7. If you want to enable console debugging, add this to your document header

<meta id="langapplier_enable_debug">