BabelEdit User Interface

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

Framework selection

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

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.

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 button or CTRL + left mouse button (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 button or CTRL + left mouse button (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:

• Translation memory
• Machine translation suggestions

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.

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

Custom filter criteria

BabelEdit can filter your translations using different criteria.

You can filter by

• translation ID
• translation text
• translated / untranslated
• approved flag

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+SHIFT+D (Windows) or ⇧+⌘+D (macOS).

Searching

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

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:

Configure languages

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

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.

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:

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.

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

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:

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.