Say goodbye to duplicate html files

vavilon.js makes i18n for static sites easy to setup and maintain

Get started

Source code

Reasons to consider vavilon.js

Lightweight bundle

vavilon.js weighs only 2.4 KB — less than 1000 bytes gzipped!

Easy maintenance

Edit translations without editing the website source code

Gradual setup

Translate string by string while keeping the site functional

Free & open-source

Use and change vavilon.js in whichever way you desire

Get started

Step 1. Include vavilon.js in your webpage

You can also get the bundle via npm or GitHub Releases. 

<script src="https://cdn.jsdelivr.net/npm/vavilon@1.0.0/dist/vavilon.min.js"></script>

Step 2. IDentify your strings

Think of a unique ID for every string and add it using vavilon class and data-vavilon attribute. 

<h1 class="vavilon" data-vavilon="hello">Hello world!</h1>

Step 3. Translate your strings

Create a JSON file with an object where keys are the string IDs and the values are the translated strings. 

{
  "hello": "Hallo Welt!"
}

Step 4. Connect the dictionaries

Just before you load the vavilon.js, insert the links to your dictionaries and specify their language. Don't forget about <html> tag! 

<html lang="en">
<head>
  <script src="path/to/de.json" type="application/json" data-vavilon-dict="de"></script>
  <!-- include vavilon.js here -->
</head>
</html>

Step 5. Add the switch

The automatic language switching is already up and running! If you want your user to be able to switch languages, use the setLang function. 

<button onclick="setLang('de')">German</button>