Skip to content
This repository has been archived by the owner. It is now read-only.
Go to file

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">
You can’t perform that action at this time.