BabelEdit User Interface

Download BabelEdit for Windows, macOS or Linux and install it.

BabelEdit runs on the following OS versions:

  • macOS 10.14 and newer, including macOS 14 (Intel and Apple Silicon)
  • Windows 10 and Windows 11
  • Ubuntu 20 and newer

Framework selection

You should see the following screen after agreeing to the license terms:

BabelEdit Quickstart: Choose your web framework

In this screen you can:

  • Open the example project to follow this tour.
  • Select a framework to start with. Chose Generic JSON if you don't use one of the provided frameworks.
  • Drop translation files to work with. BabelEdit tries to detect the framework

The main screen

To follow this short tour click on Open Example Project. The example project will open with a screen similar to the one below.

If you don't want to use the example project and start with your framework directly you have to configure your languages first.

BabelEdit tour: Translation JSON files, spell checking, suggestions

The screen has 2 main areas

  • translation tree view or translation list on the left side
  • edit area on the right side

Translation view (left side)

The translation view shows all your translation IDs as a tree view or list. You can toggle the display using the icon right of Translation IDs.

The IDs are displayed in a tree if possible — which means that they are either already structured in a tree in your translation files or look similar to identifiers separated by dots (.). E.g. form.password.label.

A flat list is displayed if you use plain text for your IDs. e.g. "Hello world!": "Hallo Welt!".

Selecting an ID or folder in the view displays the translations on the right side for editing.

Use the right mouse or CTRL + left mouse (MacOS) on a translation ID to display the context menu with function like rename, move, copy and more.

(No) drag & drop in the tree

Sometimes users ask us why we don't add drag & drop functionality to BabelEdit's tree view.

We omitted this on purpose. The reason is that you can easily do the same with Copy & paste or the Move to and Copy to from the context menu on a selection. Using these is a deliberate action.

We assume that users more often want to select than move items. Drag & drop could easily trigger renames by accident which you might notice way later.

Translation editor (center view)

Editing translations

Each translation is displayed in 3 blocks:

  • The heading with the translation ID
  • The comment area (editable by using the notepad-icon on the right)
  • The translations

BabelEdit displays all languages at once to give you an overview over the different translations. This makes it easier to be consistent across all your translations.

Translations are automatically spell-checked. Use right mouse or CTRL + left mouse (MacOS) over an underlined word to correct or ignore it.

The approved flag on the right is a help for you to know which translations are considered final or not.

Tool area at the bottom

You can enable 2 tools at the bottom of the center area:

Source code view (right side)

The source code view shows you where the current translation is used in your project. The source code files must be accessible from BabelEdit.

Translation source code references

BabelEdit tries to detect your source root when you create the project. If this fails, you can manually set the root folder in Project Configuration

Adding translations

There are 3 ways you can add new translation IDs to your project:

Adding an ID manually

Click *Add ID or use one of these keyboard shortcuts:

  • Windows: CTRL+N
  • macOS: +N

It opens a dialog that allows you to enter the new ID. If you've selected a branch in the Translation ID tree on the left side, the branch ID is automatically inserted in the dialog so that you only have to enter the last part of the ID.

You can also use this dialog to jump to an existing ID. Just enter the ID and BabelEdit will open it in the center view.

Use the Extract from source code... button to add IDs found in your source code (requires configured Source Code View and is not available for all project types).

Extracting IDs from the source code

Requires configured Source Code View and is not available for all project types. This is available from the Add IDs dialog, menu or using this shortcut:

  • Windows: CTRL+ALT+N
  • macOS: ++N
BabelEdit extracts IDs from source code

On the left side, you see all IDs that are not yet part of your translation files. Selecting an ID shows its use in your source code on the right side.

Some IDs might show a warning sign. This means that they can't be added to the project. This is usually because of conflicting names (e.g. main.title can't be added to a project that contains the id main)

You add the selected IDs to your project using the Add selected button. You can also select all IDs.

You can also ignore IDs in the project. They will not show up the next time - use the small Reset ignore list to un-hide them.

The extractor works based on regular expressions on your source code. It has some limitations (e.g. it does not detect comments).

The extraction is supported by the following frameworks:

FrameworkComment
Angular (Transloco)does not support namespaces using read
Angular (ngx-translate)yes
Ember (json + yaml)yes
React (i18next)does not support namespaces
Laravel (json + php)yes
React (react-intl/formatjs)yes
Svelte (svelte-i18n)yes
Vue (vue-i18n)yes

Using an extractor provided by the framework

Some frameworks support ID command line tools that scan the source code of your project for new IDs and update the JSON files.

BabelEdit detects these changes and re-loads the JSON files. Just make sure to save your changes in BabelEdit before running the extraction tool.

Filtering

Quick filter on translation IDs

Need to jump to a translation ID quickly? Start filtering:

  • Windows: CTRL+D
  • macOS: +D

Reset the filter with ESC

Filter translation IDs with the quick filter in BabelEdit

Custom filter criteria

BabelEdit can filter your translations using different criteria.

Filter translations

You can filter by

  • translation ID
  • translation text
  • translated / untranslated
  • approved flag
  • used / not used in source code (requires configured Source Code View)

BabelEdit displays all translations matching your criteria. The display switches to list view while the filter is active.

The shortcut for the filter is CTRL++D (Windows) or ++D (macOS).

Searching

You can search for text in all translations selected for the center view.

FunctionWindowsmacOS
FindCTRL+F+F
Find nextF3+G
Reset filterESCESC
Search functionality in BabelEdit 3

Text transformation

You can either make the complete text upper-case, lower-case or make all lowercase except for the first letter in.

These functions are available from the menu or by using the following shortcuts:

FunctionWindowsmacOS
Uppercase first letterCTRL++U++U
UppercaseCTRL+ALT++U+++U
LowercaseCTRL++L++L

Project configuration

Project configuration

File Format

The settings might vary depending on your selected framework.

These settings describe the file format used for the translation files. You can set the indentation and also the layout.

E.g. for JSON based translation files, it's possible to represent the translations as a flat structure or tree.

  • Indent - indentation for JSON files
  • Format - JSON files can be written as nested (tree) or flat
  • Support arrays - detects the use of array in JSON files. E.g. items.0, item.1, items.2,... can be represented as array instead of explicit IDs

Language Codes

You can add custom language codes in this section. This is useful for languages BabelEdit does not yet support or if you want to create variations - e.g. for specific customers.

Editor

  • Save empty translation - use this if you want to save translations that contain no text. If unset, BabelEdit omits these IDs when saving
  • Translation order - preserve order like in the source file or sort translations by ID
  • Copy Template 1..3 - Set the template when copying an ID to clipboard (by clicking right mouse button in the tree). Use %1 as a placeholder for the ID.
  • Source root - The root folder of your source code files. Used by the source code viewer, add IDs from source and filters.
  • Source code editor - You can double-click on source files in the source code viewer to open a reference in your IDE. BabelEdit detects many IDEs in case yours does not open, set the executable here.
  • Editor parameters - The parameters for the source code editor. %1 for the file name, %2 for the line number

Configure languages

BabelEdit can work with different frameworks and adapts to their file layout.

Add languages to your translation project

Frameworks with a single file per translation

Some frameworks (like ngx-translate) have one JSON file per language. Add new languages by:

  • dragging & dropping translation files (JSON, PHP)
  • selecting a directory to search for files
  • creating a new file in BabelEdit

Frameworks with multiple files per language

Some frameworks (e.g. Laravel) use multiple files per language. Add new languages by:

  • drag & drop of a language folder
  • selecting an existing language folder
  • creating a new folder for the files in BabelEdit

BabelEdit automatically collects all language files found in these folders.

Primary language

Choose one language as your primary language — this is usually the language you use for development. The primary language is used as source for machine translation features such as suggestion and pre-translate.

You can configure the primary language at the bottom of the configure languages dialog.

Custom languages

BabelEdit also supports custom languages. You can use them to either support languages which are not included in our language list or to create special variations. E.g. for specific customers of your application, or to create a polite or formal version of your UI.

How to add custom language codes to BabelEdit
  1. Open the Languages dialog from in the toolbar.
  2. To add a new language file, use the Add button, and select New from the drop-down.
  3. The Language code not found? link at the bottom of the language list opens the custom language configuration.
  4. Click New to create your language.
  5. Now enter the name and the code you want to use. If you are building a variant of an existing language, select the spell checker and the machine translation language you want to use.
  6. Click Close and select your new language code from the list.

Translation memory

BabelEdit comes with translation memory functionality. It uses the translations in your document and does not require additional configuration. The feature inside BabelEdit is called Similar Phrases.

To activate the translation memory simply click on the in the bottom right corner of BabelEdit:

Using the tranlation memory built in BabelEdit

This shows a pane at the bottom of the center view with phrases that you used in a similar context.

Suggestions

BabelEdit can display translation suggestions for the current text using DeepL, Google or Microsoft Translate. Enable this feature by clicking on the button in the bottom right corner of BabelEdit.

Please be aware that your translations are sent to external services for translation, consult the section Privacy & what happens to your data in our documentation for details. Please be also aware that we can't offer this feature without limits due to the costs we have to pay for the translations service ourselves, see The cost for machine translation

BabelEdit uses the primary language that you can set in the configure languages dialog as source language for the translations.

Use the shortcut CTRL+number (Windows) or CMD+number (Mac) to replace the current translation text with the suggestion. You can also click on the translation text.

BabelEdit's machine translation feature using Google, DeepL and Bing Translate

If you want to translate many texts at once use the pre-translate feature.

Pre-translating

Pre-translate is the most awesome feature if you want to preview your application in a different language or help your translator. Simply click on the magic wand and let BabelEdit fill all empty translations with machine-translated messages. This requires the primary language to be set.

We currently use DeepL, Google Translate and Bing Trnslate for this feature. Please be aware that your translations are sent to external services for translation, consult the section Privacy & what happens to your data in our documentation for details. Please be also aware that we can't offer this feature without limits due to the costs we have to pay for the translations service ourselves, see The cost for machine translation

Pre-translation of JSON files using Google Translate

Saving and the .babel files

Consider the .babel file as project configuration file. You are asked to store it the first time you save your project.

BabelEdit has to store additional data that can't be saved in .json files (such as the comments, and the state of the approved flags needs). The file also contains references to your language files and other configuration data.

You can check it in your version management system — the file contains relative paths from itself to the translations and should work on all computers as long as all files are on the same file system.

BabelEdit does not store the translations in the .babel file. It always writes the data back to the translation files.

Import and export

Use the export function to export your translations for translators or to use with other applications.

BabelEdit can currently export as CSV files which can be opened with

  • Microsoft Excel
  • Apple Numbers
  • LibreOffice
  • Google Docs
  • ... and more

Exporting translations

Select the languages to export from the dialog:

tour-6-export

BabelEdit writes a CSV file with the following columns:

  • translation ID
  • translations in all selected languages
  • comments

Please make sure to keep the ID column, and the headings for the translations — you won't be able to import the translations back otherwise.

Importing translations

Click on "Import" and select the .csv file for the import.

BabelEdit requires the first column to contain the translation IDs, the following columns have to contain the translations.