Blog ShowRoom Store

Supported Frameworks

BabelEdit supports many frameworks and translations packages.

BabelEdit has extended support for the following frameworks:

If you don't work with one of the above you can still use BabelEdit with the generic file formats. The functionality is the same but some defaults and presets are not configured in this case:

Angular

Angular is currently supported using the ngx-translate package.

Angular's native localization using XLIFF is not yet available in BabelEdit because of several issues in Angular's implementation. Please send me a mail if you need XLIFF support.

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

BabelEdit supports the following translation modules for React:

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

Please use a i18next project to work with react-intl.

React + LinguiJS

LinguiJS is supported with the JSON catalog file format. Please use a Generic JSON project to work with React and LinguiJS.

Laravel

In Laravel you have 2 choices:

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

Laravel: PHP files

BabelEdit can read PHP files that simply return an array.

The PHP parser in BabelEdit is restricted and does not perform calculations, nor does it support variables. BabelEdit does not maintain comments or the file structure of the original php file.

Laravel: JSON files

You can use all JSON formats for Laravel:

Vue.js

BabelEdit support translations using vue-i18n. You can either use multiple .json files for each language or use single file components with a <i18n></i18n> section.

See our vue tutorial for more information.

vue-i18n, .json files

BabelEdit supports one language per .json file with nested JSON objects You can either use require/import to add these files to your project or load them at runtime.

vue-i18n, .vue files

BabelEdit also supports single file components in vue files. The translations for all languages have to be enclosed in a <i18n></i18n> section. The current format supported is JSON.

Ember.js

BabelEdit supports Ember.js with the following packages:

Ember + ember-intl

Ember with Ember-Intl is supported with YAML or JSON files. You have to choose which one you want to use — you can't use both formats at the same time.

Please visit our ember-intl tutorial for a quick tutorial on how to translate your application.

BabelEdit can currently work with one file per language — e.g.

  • translations
    • en-us.json
    • de-de.json
    • fr-fr.json

or

  • translations
    • en-us.yaml
    • de-de.yaml
    • fr-fr.yaml

Ember + ember-i18next

Please use a i18next project to use Ember with i18next.

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.

Generic JSON

Please choose the Generic JSON format for all frameworks that don't have dedicated support and use JSON files to store their translations.

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).

Generic YAML

Please choose the Generic YAML format for all frameworks that don't have dedicated support and use YAML files to store their translations.

BabelEdit supports YAML format version 1.2 with one language per file — e.g. in a structure like this:

  • translations
    • de.yaml
    • en.yaml
    • fr.yaml