--- title: "BabelEdit - Editor for JSON translation files for Angular & React" description: "Edit your translation files in parallel. Supports Angular (ngx-translate), React (react-intl) and other frameworks that use JSON to store translations." canonical: "https://www.codeandweb.com/babeledit" source: "html" --- # BabelEdit - Editor for JSON translation files for Angular & React Translation File Editor # BabelEdit Enhancing Software Localization. BabelEdit is a reliable solution for handling json, yaml, php, arb, vue, properties, resx, or xliff translation files. Intended to make the development process more streamlined and productive. [Download BabelEdit 5.7.0](https://www.codeandweb.com/babeledit/download/5.7.0/win) for Windows [Also available for macOS and Linux](https://www.codeandweb.com/babeledit/download.md) ## Supported Frameworks BabelEdit supports many web development frameworks out of the box … and many more using the generic JSON or YAML format * [Angular](https://www.codeandweb.com/babeledit/tutorials.md#angular) * [Ember](https://www.codeandweb.com/babeledit/tutorials.md#ember.js) * [Flutter](https://www.codeandweb.com/babeledit/tutorials.md#flutter) * [i18next](https://www.codeandweb.com/babeledit/tutorials.md#react) * [Java](https://www.codeandweb.com/babeledit/documentation/frameworks/java.md) * [JSON](https://www.codeandweb.com/babeledit/documentation/frameworks/json.md) * [Laravel](https://www.codeandweb.com/babeledit/tutorials.md#laravel) * [.NET](https://www.codeandweb.com/babeledit/documentation/frameworks/dotnet.md) * [React](https://www.codeandweb.com/babeledit/tutorials.md#react) * [Rails](https://www.codeandweb.com/babeledit/documentation/frameworks/ruby-on-rails.md) * [Svelte](https://www.codeandweb.com/babeledit/tutorials.md#svelte) * [VueJS](https://www.codeandweb.com/babeledit/tutorials.md#vuejs) * [YAML](https://www.codeandweb.com/babeledit/documentation/frameworks/yaml.md) * [YAMLPO-files](https://www.codeandweb.com/babeledit/documentation/frameworks/po-files.md) ## Why you need BabelEdit Writing some JSON or YAML files is not hard... I am a developer! I know diff! What could possibly go wrong? Handling things is easy — as long as you only have one language file. That's right. The pain starts as soon as you add your first translation. * Are all messages available in all languages? * Is this message still in use — or can it be removed? * What's the status of that translation? Is it draft or final? * How do I export the translation in a file format that my translation agency can handle? BabelEdit is the solution to all of these problems — and more... ## BabelEdit vs YourCompareTool See how the same files look in BabelEdit and a compare tool. (Don't get me wrong: A compare tool is a very useful. It's just not the right tool for handling translation files!) ## More features **Never out of sync: Edit all files at once** BabelEdit performs add, delete and rename operations on all translation files at the same time. Your files can never get out of sync! A message either exists in all files or none. **Don't waste your time** Diff isn't the answer for managing translation files. Every single line in a translation file contains changes because of the different languages. And how do you want to handle 3 or more language files? Ready to dive in? Try BabelEdit today. [Download](https://www.codeandweb.com/babeledit/download.md) ## The translation tool for developers ### BabelEdit knows your framework BabelEdit does not simply edit translation files. It has knowledge about the framework you use. **No conversion, import or export required** BabelEdit directly works with your framework's translation files: * json (Angular, React, Laravel, Vue and more) * yaml (Ember) * php (Laravel translation data) * arb (Application Resource Bundle, Flutter) * properties (Java, Groovy, Grails,…) **Framework aware** BabelEdit knows the internal structure of your translation files and where to find them. It also knows what placeholders your framework uses and how translations are used in your source code. ![BabelEdit can translate files for frameworks: Angular, React, Vue, Ember, Laravel, Flutter and many more](https://www.codeandweb.com/static/e946cad9427f544e1300f9249e5e038c/87706/babeledit-frameworks%402x.png) BabelEdit can translate files for frameworks: Angular, React, Vue, Ember, Laravel, Flutter and many more ### Source code view The source code view shows you where translations are used in your code. **Find unused translations** BabelEdit helps you finding translations that are not used in your source code anymore. **See the context** The source code view also shows you in which context a translation is used. ![BabelEdit shows you where a translation is used in your source code](https://www.codeandweb.com/static/db2939f8aeeb8c53ea0474f17fd5af60/87706/sourcecodeview%402x.png) BabelEdit shows you where a translation is used in your source code Ready to dive in? Try BabelEdit today. [Download](https://www.codeandweb.com/babeledit/download.md) ## Translation tools The tools in this section help you with the translation process itself. ### Suggestions & Pre-translate Let BabelEdit fetch translations from **Google Translate**, **Microsoft Translator** or **DeepL**. You can use them as suggestion for a single phrase or fetch all translations for a language. **Get translation suggestions** The suggestions panel in BabelEdit displays machine-translated sentences while you edit. Accept the suggested translation as your current translation with a single click. **Translate all messages with a single click** You want to see how your application looks in a different language? Or save some money and support your translator? Use pre-translate to auto-magically fill all empty translations. ![BabelEdit translation suggestions from Google, DeepL and Bing](https://www.codeandweb.com/static/c6130779d0d99de2630dc4520f174fa4/8fd58/babeledit-suggestions%402x.png) ### Spellchecker The spell checker automatically checks your messages while typing. **Correction and dictionary** BabelEdit suggest the correct spelling and you can of course add new words to the dictionary. **42 languages included** BabelEdit's spell checker comes with 42 languages and checks each message in the corresponding language. ![BabelEdit: spell checker for JSON files](https://www.codeandweb.com/static/cf97e03fbda72bc545f47ba4ab426b01/aef24/babeledit-spellchecker%402x.png) ### Easy exchange with translators Export your messages to exchange them with 3rd party translators or use them in other tools. Importing from these files is if course also supported. **Export / Import files with translators and other tools** Translation agencies are usually not very happy if you send them your .json or .yaml files — but that's not a problem for you! Import and export your messages if you want to exchange data with a translation service that does not use BabelEdit. BabelEdit supports the following formats for data exchange: Excel (.xlsx) CSV (.csv) Google Spreadsheets **Convert between translation file formats** Use the export / import mechanism to convert your project files between different formats such as yaml, json or xml. ![Export JSON/XLF translation files to Excel](https://www.codeandweb.com/static/d5cada3d39d9ad71b63b4170c012d1a7/26b87/babeledit-export-mac%402x.png) Ready to dive in? Try BabelEdit today. [Download](https://www.codeandweb.com/babeledit/download.md) ## Works with your favorite web framework We support the following web development frameworks among many others: ### Angular Supports applications using **ngx-translate**. Translations can be stored in **json** files. [Tutorial](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-angular-app-with-ngx-translate.md) ### React Supports translations created with **react-intl**, **react-i18next** and **LinguiJS** [Tutorial](https://www.codeandweb.com/tutorials/react.md) ### Vue.js Supports **vue-i18n**. Translate your **json** or **yaml** files. [Tutorial](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-vue-app-with-vue-i18n.md) ### Laravel Supports translations in **php** and **json** files and your **Vue.js** enhanced pages. [Tutorial](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-laravel-project.md) ### Flutter Supports Flutter with Application Resource Bundle (**arb**) files. [Tutorial](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-flutter-apps.md) More tutorials are available in our [tutorials section](https://www.codeandweb.com/babeledit/tutorials.md). ## Know what to do ### Filters Apply filters to focus on the work ahead. **Filter by words or status** Filters not only allow you to search for specific words or translation IDs. You can apply them also to find all untranslated or approved / not approved messages. Find all occurrences of a word to check your translations for consistency. ![Filtering translations by id, or status](https://www.codeandweb.com/static/7bfd4d0bf6a302b162ab0ca5178ec9b9/d8484/babeledit-filter%402x.png) ### Comments & approval **Give your translators the context they need** Add comments to give the translator more information about the position and context of a message. **Track translation progress** Use the Approved flag to mark translations that are considered final. ![Add comments to JSON translation files.](https://www.codeandweb.com/static/90b6f1897f956c0bed12e4c89a491f4f/0cd93/babeledit-comments%402x.png) ### Statistics **Know where you are standing** The statistics give you an exact overview by language about what is open, translated or approved. **Estimate translation costs** Translators usually get paid by the number of words they translate. BabelEdit gives you an estimate of how much you'll have to pay for your messages. ![Display translation statistics: Word and sentence count](https://www.codeandweb.com/static/a113ac15cda4ff4a70b8cd03b638b2ca/b222f/babeledit-statistics%402x.png) ## More features **Customizable view** See your translation ids as list or tree, filter items to only see the translations you are currently working on. **Windows, macOS & Linux** BabelEdit works on all major desktop operating systems: Windows, macOS or Linux. **Fair pricing model** Affordable price. Buy BabelEdit once and use it forever. Free updates included for 1 year. No subscription. Ready to dive in? Try BabelEdit today. [Download](https://www.codeandweb.com/babeledit/download.md)