How to Install
vavilon.js on your website you should connect the script in your
<head>. Here are some ways to get this going:
via CDN (recommended)
You can get
vavilon.js via jsDelivr. This is the fastest and the most reliable
If you use NPM with your static website, you can install
vavilon.js using npm:
npm install vavilon
Then you can include the script in your webpage like so:
You can find latest version of
vavilon.js in Releases
section on GitHub. Download either the minified or the uncompressed version and
include it in your document:
How to use
Create your HTML page on open the one you've already created. Set the
langattribute in your
<html>tag:Hello World!How are you?
If you rely on multiple versions of the same language (like US and UK English), you can user the country-specific lang codes (i.e.
Give unique IDs to every string on your HTML page that you want to have translated. Put the IDs inside the
data-vavilonattribute and add the
vavilonclass to these elements:Hello World!How are you?
Create JSON dictionary files for the languages you want to support. Each file should be an object, with the keys being the unique string IDs and values being the translated strings. Here's an example for Russian language:
Connect the dictionaries inside
<head>element. Add the
data-vavilon-dictattribute to specify the dictionaries language:
Download and connect the latest version of
vavilon.js. Upon doing so, your page now will automatically change its language based on the end user's browser locale.
If you want your user to be able to switch languages, you can set it up by using the
As you may have guessed from the major version number being 0, the library is not completely finished. Here are some things that are not supported or don't work as expected:
Styling and inline tags
vavilon.js replaces the text of the elements, not their HTML code,
which means that the code like
will not have the word "world" written in bold.
The support for styling your strings will come in future releases. If this is crucial for you, you can use a workaround like this:
This way you can define separate IDs for the words "Hello" and "world" inside your dictionary file.
While it is possible to create static websites using frameworks like Vue.js,
React and Svelte, the support for those has not been tested at all. If you use
these frameworks I would highly recommend you use something other than
like the i18n plugins created specifically for these frameworks.
With regard to jQuery, it has not been tested yet either, but I guess it should
work just fine. If you want to play around with
vavilon.js and jQuery, I
encourage you do so.
If you encounter any bugs, don't hesitate filing an issue