Blog ShowRoom Store

Supported Frameworks

BabelEdit supports many frameworks that use JSON files for translations. Please choose Generic JSON if your framework is not listed below.

BabelEdit has extended support for the following frameworks:

Generic JSON

Please choose the Generic JSON format for all frameworks that don't have dedicated support. It can also be used with Laravel if you are using JSON translation files instead of PHP.

This generic json works one file per language, e.g.:

  • de.json
  • en.json
  • fr.json

BabelEdit supports all 3 JSON formats (in project settings):

You can also select the indentation (none, 2 or 4 spaces, tabs).

Angular + ngx-translate

Complete tutorials including a small demo project are available here:

The preferred layout for the ngx-translate project is to keep the translation files in your assets/i18n folder and name the json files with the translations according to the language code:

  • assets
    • i18n
      • de.json
      • en.json
      • fr.json

You are of course free to give your files other names or store them elsewhere. Just make sure to configure ngx-translate according to your file layout.

ngx-translate supports all 3 JSON formats supported by BabelEdit:

If you use ngx-translate-extract (recommended!) to extract your translations and update your translation files make sure that the format you chose matches the file format set in BabelEdit's settings.

React + react-intl

A complete tutorial including a small demo project is available here: How to translate your React app with react-intl

The preferred layout for the react-intl project is to keep the translation files in your translations folder and name the json files with the translations according to the language code:

  • translations
    • de.json
    • en.json
    • fr.json

The preferred file format is JSON with namespaces in key (Flat JSON).

Configuring the project

Extracting messages with babel-plugin-react-intl

You can extract your translations from your source files using babel-plugin-react-intl.

The plugin generates so called message files that contain all IDs and strings to translate. BabelEdit can read these files including the description and default message.

If you don't use the extraction plugin simply skip this step. Setting the message file directory is later still possible from the project settings.

React + i18next

A complete tutorial including a small demo project is available here: How to translate your React app with react-i18next

i18next allows you to use multiple translation files, grouped in a directory:

  • translations
    • de
      • common.json
      • mainscreen.json
    • fr
      • common.json
      • mainscreen.json
    • en
      • common.json
      • mainscreen.json

You can think of the different files as name spaces.

The preferred file structure is JSON with nested namespaces (Namespaced JSON).

BabelEdit asks you for the containing the files for one language.

Laravel

In Laravel you have 2 choices:

Laravel: PHP files

A complete tutorial including a small demo project is available here: How to translate your Laravel project

The PHP parser in BabelEdit is restricted to simple array without variables. BabelEdit does currently not maintain comments or the file structure of the original php file.

Laravel: JSON files

You can use all JSON formats for Laravel: