Skip to content
To test translations for Firefox OS apps
Branch: gh-pages
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


This app is to test translations for Firefox OS apps and to have a blueprint for your own app with translation support. Feel free to fork this repository and then build up your app supporting multiple languages.

Optionally, you can set up your project for localization at Transifex to accept and import translations from other people.

Try it out

If you go to in your web browser or add it as an app in the App Manager in the Firefox Developer Tools (Tools > Web Developer > App Managerin Firefox) you can test it out right away.

If you plan on testing in the App Manager, these are your two options:

How to view different locales

To view TranslationTester with a different locale, you can either manually trigger it via JavaScript or change the language in Firefox/App Manager:

How it works

  • All localizations are available in the localesdirectory, organized by each language code
  • The locales.ini file imports them
  • The included l10n.js JavaScript file applies the current user locale's translation to respective element through their data-l10n-id attribute.

Add a new language/locale

If you want to add a new language, here's how to do it:

  1. Create a directory in the locales directory, e.g. en-US

  2. Create two files in your locale directory: and will have all the translations for your app's content, will have the translation for the name and description of your app

  3. Open locales.ini and import your translation, e.g: [en-US] @import url(en-US/

  4. Open manifest.webapp and add your language in the locales directive:

    "en-US": {
    	"name": "TranslationTester",
    	"description": "This is a testing app for Firefox OS translations"

Adding new text to new elements

If you want to add a new text/translation in the content file:

  1. Add the data-l10n-id attribute to the desired element: <p data-l10n-id="winter-for-real">Winter for real</p>
  2. The value chosen for the data-l10n-id attribute needs to correspond to the same value in the file for each language, e.g: winter-for-real = Winter for real

Credit for translators

If you have translations offered by people not on the project - for instance, through the Transifex service - it's highly recommended that you list their names and give them appropriate credits. The suggestion, and implemented in this example, is to give an element an attribute, data-l10n-id="translation-credits" in which the names will be retrieved from respective file for the specific language being shown.


This repository and these instructions have been inspired and greatly helped by the Localizing the Firefox OS Boilerplate App article by Christie Koehler.

You can’t perform that action at this time.