Skip to content

[BabelEdit] A Time Saving Translation Tool

Georg Höller
Georg Höller
3 min read
[BabelEdit] A Time Saving Translation Tool

If you ever did a project which should support multiple languages you know the hassle of handling multiple language files. There are a lot of tools out that should solve this issue but I always keep coming back to BabelEdit.


First of all head over to the official Website for downloading and installing the most recent version: BabelEdit Download
(BabelEdit is available for Windows, macOS and Linux)


You can try BabelEdit for 7 days for free. Afterward, it will cost about 40$ which includes lifetime usage and a 1-year update supply which is a really fair price in my opinion.

Project initialization


When you open the program for the first time it will look like this:

As you see it supports a lot of translation frameworks. I will continue with Angular + ngx-translate:

On the next page you can select your translation files and a primary language:

And that's it!

My BabelEdit Workflow


I'm doing all translations by myself, so my workflow doesn't contain any export/import steps.

As I'm using the package ngx-translation for my translations in Angular I have to work with JSON files. Did you ever edit a big JSON-based translation file by hand? Maybe multiple times because you have support for multiple languages? It was a mess, error-prone and took just too much time!
With BabelEdit it is done in under 10 seconds and I will not have any git merge troubles!

Just hit "Add Id" and type in the translation ID:

Hit Enter and Tab to jump into your selected main language and type the needed translation. Do another Tab to jump to your next language.
Sure you can now type in the other language manually but if you don't know the translation just hit Ctrl + 1 and the machine translation will autofill it for you!
This is such an awesome feature for me! It supports Google, Microsoft and DeepL Translations - just awesome.

When your hit Tab at the last language you jump back to the translation ID Tree and your currently edited ID keeps selected.
This means you can hit Ctrl + C to copy the path you will need in your framework to use this translation.
If you open the context Menu at an ID you have several other options to copy - it depends on which one you prefer for your workflow.

Don't forget to hit Save or Ctrl + s which will save the BabelEdit-File and update your translation files.
If you didn't download BabelEdit it now here is the link again:  BabelEdit Download
Hit it and start translating much faster!
I hope you enjoyed reading this short tool introduction. Keep coding!

Official Links:
Features
Tutorials
Documentation

If you have further questions about this topic or need help with a problem in general, please write a comment or simply contact me at yesreply@georghoeller.dev :)
ToolsAngular

Comments


Related Posts

Members Public

[Angular | Storybook] Tailwind, Directives, Content Projection, Icons and i18n

Install packages npm i -D @nx/storybook npm i -D @storybook/angular Create config nx g @nx/storybook:configuration <project-name> I created the config inside the main app to share some configs/modules. My stories are located at libs/shared/ui. That's why I had to

[Angular | Storybook] Tailwind, Directives, Content Projection, Icons and i18n
Members Public

[Angular | RxJS] BehaviorSubject with custom states

Whenever I call an api, often my frontend has to go through some different visualization steps. Imagine you have some kind of search input and a list which displays the results but you want to show an loading indicator, an error hint and something different when the result is empty.

[Angular | RxJS] BehaviorSubject with custom states
Members Public

[Angular] Dynamic App Config and Translations in a Submodule

When I'm setting up a new angular application, I always start with translation support and an external app config json loader. You should never start a new app without an internationalization (i18n) system - even if you only support one language! We are going to use the package

[Angular] Dynamic App Config and Translations in a Submodule