BabelEdit Quickstart

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)

The editor area is also split into 2 parts: The top part for editing the translations. The bottom part is the suggestions area.

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.

Suggestions

BabelEdit can display translation suggestions for the current text using Google or Microsoft Translate. Enable this feature by clicking on the Enable button in the suggestion area.

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.

Similar Phrases

When translating text, it's essential to be consistent with the translations you use. Choosing different synonyms for the same source word might be correct - but confuse the user of your application.

The similar phrases view shows you translations that are closely related to the current text you are editing.

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 & searching

BabelEdit has a combined filter and search function available from the toolbar, or the top of the translation ID view:

You can filter by

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

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

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.

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 Google Translate 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.