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