--- title: "BabelEdit Tutorials" description: "Collection of tutorials and screen casts for BabelEdit" canonical: "https://www.codeandweb.com/babeledit/tutorials" product: "babeledit" source: "html" --- # BabelEdit Tutorials We've created these tutorials to give you a quick start with your favorite framework. In addition to that, you might also find useful articles in the [Knowledgebase](https://www.codeandweb.com/babeledit/support.md). [Angular](https://www.codeandweb.com/babeledit/tutorials.md#angular)[EmberJs](https://www.codeandweb.com/babeledit/tutorials.md#ember.js)[Flutter](https://www.codeandweb.com/babeledit/tutorials.md#flutter)[Laravel](https://www.codeandweb.com/babeledit/tutorials.md#laravel)[Php](https://www.codeandweb.com/babeledit/tutorials.md#php)[React](https://www.codeandweb.com/babeledit/tutorials.md#react)[Svelte](https://www.codeandweb.com/babeledit/tutorials.md#svelte)[VueJs](https://www.codeandweb.com/babeledit/tutorials.md#vuejs) ## Angular ![Angular Localization with ngx-translate: Complete Tutorial](https://www.codeandweb.com/static/3d259f82fbc214c0061ca60d12df938b/d8f52/how-to-translate-your-angular-app-with-ngx-translate.png) [Angular Localization with ngx-translate: Complete Tutorial](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-angular-app-with-ngx-translate.md) Master Angular i18n with ngx-translate. Complete tutorial covering setup, translation files, language switching, and best practices. Includes working examples. ![How to translate your Angular app with Transloco](https://www.codeandweb.com/static/4021a619f2e5a603cb720942b4a92cd8/d8f52/how-to-translate-your-angular-app-with-transloco.png) [How to translate your Angular app with Transloco](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-angular-app-with-transloco.md) Free tutorial: Set up Angular with Transloco (@jsverse/transloco), extract translations from code, switch translations at runtime, edit translation files. ![How to translate Angular apps: @angular/localize and XLIFF](https://www.codeandweb.com/static/7c6e7735fb996c4d4ed6f22b63a80c04/d8f52/how-to-translate-your-angular-app-with-xlf-files.png) [How to translate Angular apps: @angular/localize and XLIFF](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-angular-app-with-xlf-files.md) Free tutorial: Learn how to use @angular/localize to translate your Angular app with xliff (xlf) files. Covers ICU syntax. Example source code included. ![How to install Angular on Windows](https://www.codeandweb.com/static/29cb8e7b60abf6e855b705675085cb1a/a3fa1/how-to-install-angular-on-windows.png) [How to install Angular on Windows](https://www.codeandweb.com/babeledit/tutorials/how-to-install-angular-on-windows.md) Short tutorial (Video: 2min) and a step to step guide on how to install Node.js and Angular on a Windows computer. Create your first Angular project. ### Tutorials for older versions of Angular * [How to Translate Your Angular App with NGX-Translate (Angular 16)](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-angular-app-with-ngx-translate-16) * [How to translate your Angular 8 - 16 app with ngx-translate](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-angular8-16-app-with-ngx-translate) * [How to translate your Angular app with Transloco (@ngneat/transloco)](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-angular-app-with-transloco-ngneat) * [How to translate Angular 14 apps: @angular/localize and xlf](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-angular14-app-with-xlf-files) * [How to translate Angular 9 apps: @angular/localize and xlf](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-angular9-app-with-xlf-files) * [How to translate your Angular 7 app with ngx-translate](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-angular7-app-with-ngx-translate) * [How to translate your Angular 6 app with ngx-translate](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-angular6-app-with-ngx-translate) ## EmberJs ![How to translate your Ember.js application with ember-intl](https://www.codeandweb.com/static/f819ac340cdb45f42e933df3453e6f05/d8f52/how-to-translate-your-ember-app-with-ember-intl.png) [How to translate your Ember.js application with ember-intl](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-ember-app-with-ember-intl.md) Free tutorial: Translate your Ember.js application with ember-intl. Learn how to organise your translations in yaml for json files. ## Flutter ![How to translate your Flutter app and edit your .arb files](https://www.codeandweb.com/static/bc92acf0f40e55500e580075cb324aec/d8f52/how-to-translate-your-flutter-apps.png) [How to translate your Flutter app and edit your .arb files](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-flutter-apps.md) Free tutorial: Learn how to translate your Flutter app and comfortably work with Application Resource Bundle (.arb) files. Example source code included. ### Tutorials for older versions of Flutter * [How to translate your Flutter app (using intl 0.13.1)](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-flutter-apps-intl-0.13.1) ## Laravel ![Laravel translation tutorial: How to translate your web app](https://www.codeandweb.com/static/2dc49fa411c1c2156250d22664bfcbaa/d8f52/how-to-translate-your-laravel-project.png) [Laravel translation tutorial: How to translate your web app](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-laravel-project.md) Translation tutorial with a complete example. Covers: translation files, displaying translated texts with \_\_() , blade templates, localized routes ## Php ![Tutorial: Translation with gettext + PHP](https://www.codeandweb.com/static/c4a996d553568788ccb30cac89472156/d8f52/translation-with-gettext-and-php.png) [Tutorial: Translation with gettext + PHP](https://www.codeandweb.com/babeledit/tutorials/translation-with-gettext-and-php.md) Free tutorial: How to translate your PHP application with gettext. ## React ![How to translate your React app with react-i18next](https://www.codeandweb.com/static/d3307390eb063e0f4de56fd80bf052d7/d8f52/how-to-translate-your-react-app-with-react-i18next.png) [How to translate your React app with react-i18next](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-react-app-with-react-i18next.md) You will learn how to translate your React app with react-i18next. The tutorial also explains how to manage the translations json files with BabelEdit. ![How to translate your React app with react-intl / FormatJS](https://www.codeandweb.com/static/caca3c1b76487f57e2a193d4353f351d/d8f52/how-to-translate-your-react-app-with-react-intl.png) [How to translate your React app with react-intl / FormatJS](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-react-app-with-react-intl.md) Tutorial with a complete example on react translations. Covers: react-intl, FormattedMessage, IntlProvider and babel-plugin-react-intl ## Svelte ![How to translate your Svelte Web App.](https://www.codeandweb.com/static/2619cf111d6c7b6471d9f2b338edf170/d8f52/how-to-translate-your-svelte-web-app.png) [How to translate your Svelte Web App.](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-svelte-web-app.md) This free tutorial explains, how you can easily translate your Svelte web app with svelte-i18n. Source code included. ## VueJs ![How to translate your Vue.js 3 application with vue-i18n](https://www.codeandweb.com/static/06e0cbd5c4f41c3493bcb365199d8de8/d8f52/how-to-translate-your-vue-app-with-vue-i18n.png) [How to translate your Vue.js 3 application with vue-i18n](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-vue-app-with-vue-i18n.md) Free tutorial: Set up Vue.js with vue-i18n. Translate your templates, create and edit JSON translation files, switch languages at runtime. Covers Vue 3. ![Why using i18n sections in vue.js single file components is bad](https://www.codeandweb.com/static/21c2a1fb26c1eede4731a9209614a63f/d8f52/why-using-i18n-in-vue-files-is-a-bad-idea.png) [Why using i18n sections in vue.js single file components is bad](https://www.codeandweb.com/babeledit/tutorials/why-using-i18n-sections-in-vue-single-component-files-is-a-bad-idea.md) Using vue.js single file components with sections for your translations? Learn why you should not do that and what alternatives there are. ![How to convert vue-i18n from single file components to JSON](https://www.codeandweb.com/static/f88752ecc8bfce9c00872bd3caca9a7c/d8f52/how-to-convert-vue-i18n-from-sfc-to-json.png) [How to convert vue-i18n from single file components to JSON](https://www.codeandweb.com/babeledit/tutorials/how-to-convert-vue-i18n-from-sfc-to-json-files.md) In this tutorial shows you how you can convert your vue-i18n project from using translations in vue files (single file components, sfc) to using JSON files. ### Tutorials for older versions of VueJs * [How to translate your Vue.js (v2) application with vue-i18n](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-vue2-app-with-vue-i18n)