Localize Web Apps on Client-side with VerbaJS i18n Library

Preview:

Description:

VerbaJS is a lightweight and easy-to-use JavaScript i18n library for handling website localization.

It handles language detection based on the user’s browser settings, retrieves language JSON files, and provides a simple way to switch between languages on the fly.

Features:

• Automatic detection – Uses navigator.language with localStorage persistence
• File-based – Loads translations from /locales/[lang].json
• Dynamic updates – Changes language without page reloads
• Simple markup – Uses existing class names as translation keys

How to use it:

1. Download the verba.js library and add it to your HTML page:

<script src="path/to/verba.js"></script>

2. Create a folder that will hold your translation files. It must be named locales and be at the root of your project.

3. Create JSON files named by language code (e.g., en.json, es.json, fr.json). Structure them like this:

// locales/fr.json
{
  "language": "Français",
  "h1.title": "Page d'exemple VerbaJS",
  "p.desc": "Ce site web a été écrit en français."
}

4. Make sure your HTML elements you want translate has class names that match your JSON.

<h1 class="title">VerbaJS Example Page</h1>
<p class="desc">This website was written in English.</p>

5. Create a select element to allow your users to switch languages dynamically.

<select id="verbaSelector">
  <option value="en">English</option>
  <option value="es">Español</option>
  <option value="fr">Français</option>
  ...
</select>