
Ready to take your software localization to the next level? Look no further than SimpleLocalize, an easy-to-use and intuitive platform designed to streamline the localization process. In this guide, we'll walk you through the simple steps to invite team members and translators to your SimpleLocalize project. Let's get started!

## Table of contents

## Collaborate and translate

Collaboration between different teams is the key to successful project localization. With SimpleLocalize, you can work seamlessly with your team members and translators to ensure that your software speaks the language of your target audience. Here's why it matters:

- **Efficiency**: Working together reduces the time and effort needed to translate and maintain multiple languages.
- **Quality**: A diverse team of translators ensures accuracy and cultural sensitivity in your translations.
- **Scaling**: As your project grows, adding more team members and translators becomes effortless.

## Sign in to your SimpleLocalize account

If you haven't already done so, [sign up for a SimpleLocalize account](/register/). You will start with a **14-day free trial** and after the free trial, your account will be automatically set to the free Community plan. You can check out the feature comparison for different plans on our [pricing page](/pricing/).

Once you're logged in, you'll have access to the dashboard for your localization projects.

![Sign up to SimpleLocalize](/blog/sign-up.png)

## Create and set up a project

If you're starting from scratch, create a new project by clicking the **New project** button. If you already have a project set up, click on it to open the project view.

At that point, if you haven't imported your translations, now is the time to import them. See the instructions below to import your existing translation files, or add your translation keys manually.

- [Add languages to your project]()
- [Import your existing translation keys and translations]()

![Dashboard with list of translation projects](/blog/simplelocalize-projects.png)

## Invite team members

Invite your team members: developers, designers, product managers, support team and others involved in the translation and localization process. Invite them directly to specific projects, or grant them access to all your projects as a Team Administrator.

### Team administrators

As the Subscription Owner and Team Administrator in SimpleLocalize, you have the power to invite others into the fold. Team administrators gain access to all your projects, including those created by fellow administrators. Here's how to add a new Team Administrator:

- Go to your **Profile** (located in the top right corner)
- Open the **Team** settings - there you will find the list of your current Team administrators.
- Click on the **Invite team administrator** button.
- Enter the **email address** of the team member you wish to invite.

![List of Team administrators](/blog/team-administrators.png)

The invited user will receive an invitation email. **They must accept this invitation to join the team**. Until they do, their status will appear as pending in the list of team administrators. Once accepted, they'll have full access to all your projects.

✅ **Team administrators are allowed to:**
- create new projects on behalf of the Subscription owner,
- manage translation projects,
- invite other project members with Translator or Administrator role.

⛔️ **Team administrators are not allowed to:**
- delete projects,
- manage subscription and view invoices,
- manage team administrators,
- increase auto-translation limit.

### Project administrators

Project administrators have access to specific projects, and you can assign them this role directly from the project itself. Administrator rights for project administrators are identical to those of project owners (you). The only distinction between these two roles is that project administrators cannot delete projects.

![List of Project members](/blog/project-members.jpeg)

To invite a project administrator, follow these steps:

- Open the project and navigate to the **People** tab.
- In Project members section, click the **Invite project member** button.
- Enter the **email address** of the team member you want to invite.
- Select the user role as an **Administator** and send the invitation.

![Invite new Project member](/blog/project-members-invite.jpeg)

The invited user will appear in the list of "Pending invitations." They will receive an email containing an invitation link, which they must click to accept. Once they accept the invitation, they will gain access to the project.

### Invite Translators

SimpleLocalize offers a robust role-based permission system to ensure that each team member has the appropriate level of access. When inviting Translators, you retain control over the specific access rights granted to them.

> By default, translators are granted access to the following project tabs: 'Translations', 'Languages', 'Activity', and 'Data'.

To invite a Translator, follow these steps:
- Open the project and navigate to the **People** tab.
- In Project members section, click the **Invite project member** button.
- Enter the **email address** of the translator you want to invite.
- Select the user role as a **Translator**.

![Translator user permissions](/blog/project-members-invite-translator-permissions.jpeg)

Here you can **fine-tune the user permissions** according to your needs before sending the invitation:
- Grant or restrict the ability to add, edit, or delete languages.
- Control access to manage translation keys.
- Enable or disable the Auto-translation option.
- Allow publishing of translations to hosting environment.
- Allow import / export of translation files.
- Allow access to project Activity.

Additionally, you can precisely **specify language access**, determining which languages the user can view and edit.

![Translator languages access](/blog/project-members-invite-translator-languages.jpeg)

Once the invitation is sent, the Translator receives an email with an invitation link that provides them with access to your project. They can then start translating based on the permissions you've set up for them.


## Share project access with more people

In every project, you have the option to create a shareable access link with specific permissions, including Administrator and Translator roles. This allows you to easily share access to the project with groups of Translators or Volunteers, enabling them to directly access the project and start working on translations.

To generate a shareable access link for your project, go to **People** tab and click the **Get shareable link** button.
SimpleLocalize will then generate unique links for each Administrator and Translator role, which you can share publicly with your intended audience or collaborators.

![Generate shareable links for project access](/blog/project-members-shareable-links.mp4)

> You also have the option to **reset or delete these links** to deactivate any previously shared access.

## Managing access and permissions

As the project owner, you have full control over who can do what within your project. Use the role-based permission system to assign specific roles and access levels to team members and translators. This ensures the security and integrity of your project data.

> To change user permissions, click on the role in the project members list to change the user settings.

And there you have it - you've successfully invited team members and translators to your SimpleLocalize project! Now you can collaborate efficiently to make your software accessible to a global audience.

Remember, SimpleLocalize is designed to simplify the localization process, so you can focus on building amazing products while we handle the translation intricacies. Happy localizing!


Getting started: Invite team members and translators


Localization plays a crucial role in expanding the reach of your software, website, or app to a global audience. However, managing translation files, especially JSON files, can be a time-consuming and cumbersome task. SimpleLocalize offers a comprehensive solution to streamline this process, making localization hassle-free and efficient. In this blog post, we will explore how SimpleLocalize's translation editor and auto-translation feature can help you effortlessly translate your JSON files.

Or, take a look at our video below for a **quick video guide about auto-translating JSON files**.

![YouTube video about auto-translating JSON files](https://www.youtube.com/embed/bJf2TY1dRiM)

## Why choose JSON files for localization?

**JSON (JavaScript Object Notation) files** are an excellent choice for localization due to their simplicity and ease of use.  They allow developers to structure their content efficiently and maintain localization keys in a clean and organized manner.

However, translating JSON files traditionally has its challenges, such as dealing with numerous language files, version control issues, and managing multiple translators. SimpleLocalize addresses these concerns and offers a user-friendly platform to simplify your localization workflow.

## SimpleLocalize Translation Editor

SimpleLocalize's Translation Editor is a powerful web-based tool designed to enhance the translation process. It provides an intuitive interface that allows you to upload your JSON files and manage translations effortlessly.

With a user-friendly layout, you can easily navigate through your localization keys, view the context of each string, and edit translations in real-time.

![Translation editor in list view with all translations](/blog/translation-editor.png)

Key features of the Translation Editor:

- **Collaborative translation**: Invite your team members or professional translators to [work together on projects](/docs/general/project-sharing/).
- **Version control**: Keep track of changes made to translations and [roll back to previous versions](/docs/general/backups/) if needed. This helps maintain translation accuracy and provides a safety net for any mistakes.
- **Customizable workflow**: Adapt the translation workflow to match your team's preferences. SimpleLocalize allows you to customize not only the translation editor view but also the development workflow thanks to the [Translation Hosting](/docs/general/translation-hosting/) feature and multiple integrations.

> Learn more about [translation editor features](/docs/general/translation-editor/)

## Auto-Translation

Translating content manually can be time-consuming, especially for projects with extensive language support. To save time and effort, SimpleLocalize offers an Auto-translation feature based on Google Translate and DeepL translation services. This feature enables you to automatically translate your JSON files into multiple languages with just a few clicks.

![Auto-translating all languages](/video/auto-translation.mp4)

Benefits of the Auto-translation feature:

- **Rapid translation**: Auto-translation drastically reduces the time required to translate your content. It instantly generates translations for all supported languages, saving you hours or even days of manual work.
- **Initial content for review**: While the machine-generated translations provide a solid starting point, SimpleLocalize allows you to review and edit them using the Translation Editor. This ensures the final translations align perfectly with your project's context and tone.
- **Cost-efficient**: Leveraging machine translation can be a cost-effective solution, especially for quick and straightforward translations. It allows you to allocate your budget for manual translation to more complex or sensitive content that requires human expertise.

> Check our docs for [more details about how auto-translation works](/docs/general/auto-translation/)

## How to auto-translate JSON files?

Auto-translating JSON files with SimpleLocalize is a quick and convenient way to update missing translations or add new languages to your project. Below, you can find our step-by-step guide for auto-translating your JSON files.

### Import your JSON files to SimpleLocalize

Start by importing your existing JSON translation files into SimpleLocalize. They will serve as a base for further translations, including translation keys and your default app language.

Create your project in SimpleLocalize and proceed with the import option on the welcome screen. Choose your JSON file format (single language or multi-language files) and upload your files.

![Importing translations from JSON files](/blog/import-translations-from-json.mp4)

> **Single language JSON** - each language is an idividual JSON file, e.g., en.json, es.json, pl.json <br/>
> **Multi language JSON** - all languages' translations are in one JSON file, e.g., index.json

### Add languages

Once your translation keys are imported, you can work on the translation in the translation editor and modify them in a user-friendly interface.

If you would like to translate your project into more languages, start by adding those languages to your project and translation editor. To do that, go to the **Languages** tab and click on the **Add language** button. There, you can type the language key and name (choosing the flag or icon for the language) and check suggestions for adding more languages.

![Adding languages to the project](/blog/add-languages.mp4)

### Auto-translate

Now, it's time for the magic. To translate all missing translations and all newly added languages, stay in the **Languages** tab and hit the **Auto-translate all** button. Confirm the settings for auto-translation and wait for the translations to complete. It can take from a few seconds up to a minute, depending on the quantity of your translations. Once the auto-translation is finished, you will notice a green success notification.

![Auto-translating existing and new languages](/video/auto-translation.mp4)

> Consider [purchasing auto-translation characters for your project](/dashboard/subscription/) to use auto-translation services.

### Export translated JSON files

Once your translations are ready, go ahead and export your translation files to JSON with all the new languages you created. You can find the Export option in the **Data** tab.

![Exporting translated JSON files](/video/export-translations.mp4)

This way, you have added new languages and translated them in just a few minutes. Sounds easy, right?

## Conclusion

SimpleLocalize's translation editor and auto-translation feature together offer a comprehensive solution to simplify your JSON file localization process.
With an intuitive interface, collaborative capabilities, and machine translation services, you can efficiently manage translations and reach a global audience.
Don't let language barriers hold you back; embrace SimpleLocalize and make localization a breeze for your next project!



How to auto-translate JSON files


Localization has become a crucial aspect of global business expansion, enabling companies to reach new markets and engage with diverse audiences. However, managing translations efficiently can be a challenging task without the right tools in place. That's where Translation Management Systems (TMS) like SimpleLocalize come to the rescue.

In this blog post, we'll introduce you to SimpleLocalize and explore how it can simplify the localization process for your business. Whether you're new to TMS or seeking a more streamlined solution, SimpleLocalize offers a simple, user-friendly interface, powerful features, and seamless integration options to help you scale your localization efforts.

## Table of contents

## What is a TMS?

A Translation Management System (TMS) is a software tool designed to **streamline and simplify the process of managing translations and localizing content**. It serves as a centralized platform that facilitates collaboration between translators, developers, project managers, and everyone involved in the localization workflow.

TMS tools offer features such as a translation editor, translation storage, translation key management, version control, and integration capabilities with various file formats and development frameworks. By automating and optimizing translation processes, TMS enables businesses to efficiently handle multilingual content and improve overall translation quality. Whether you're translating a website, a software application, or any other content, a TMS like SimpleLocalize can be an invaluable asset in effectively managing your localization projects.

### Benefits of using a TMS

Using a Translation Management System (TMS) like SimpleLocalize offers several benefits for businesses looking to streamline their localization processes. Here are some key advantages of implementing a TMS:

- Improved Efficiency: A TMS centralizes translation management, which results in efficient collaboration between different team members and automates the translation and localization workflows.
- Enhanced Translation Quality: Consistency and accuracy are ensured with features like translation review, auto-translation, and translation memory.
- Cost Savings: By automating processes of content translation, TMS helps minimize costs associated with duplicate work and manual errors.
- Scalability: Easily handle multiple languages and expand localization efforts by adding new languages.
- Collaboration: A TMS provides effective collaboration between developers, translators, and project managers.
- Centralized Translation Storage: All translation files and versions are stored in one place, ensuring easy access and retrieval of localized content.
- Integration Capabilities: seamlessly integrate with multiple development frameworks; use SimpleLocalize CLI and API to easily download or upload translations to your project.

## What is SimpleLocalize?

SimpleLocalize is an online Translation Management System (TMS) that **prioritizes simplicity and effectiveness in software localization**. Its user-friendly interface enhances the overall experience, while its seamless integration with different translation workflows in various projects ensures smooth and effortless management of translations. SimpleLocalize aims to provide a straightforward and intuitive solution for businesses looking to streamline their localization processes.

![SimpleLocalize translation editor](/blog/translation-editor.png)

Key features of SimpleLocalize include:
- **Intuitive and customizable Translation Editor**: The translation editor in SimpleLocalize offers an intuitive interface with customizable options. Users can personalize their work environment with keyboard shortcuts, different view options, and even switch to a dark mode for a comfortable and enjoyable experience.
- **Support for multiple file formats**: SimpleLocalize supports a wide range of file formats, including JSON (single or multi-language), Excel, CSV, YAML, XML, PO, and more. This flexibility allows users to work with their preferred file formats and easily import/export translations.
- **Version control and backups**: SimpleLocalize offers the ability to create backups and maintain different versions of translations. This feature ensures data safety and allows users to roll back to previous versions if needed.
- **Translation hosting**: Ensures fast and efficient delivery of localized content to end-users.
- **Access sharing**: work together with different team members and translators through access sharing features.
- **Developer Tools for rasy integration**: SimpleLocalize offers a range of developer tools to facilitate integration into existing workflows. These include CLI, Webhooks, and an API, allowing developers to customize translation and localization workflows based on their specific needs.

## How to get started with SimpleLocalize TMS

Translation management is made easy with SimpleLocalize. In this section, we'll guide you through the steps to get started and make the most out of this powerful tool.

### Create an account

To begin your journey with SimpleLocalize, the first step is to create an account. You will start with a **14-day free trial in our Team plan** to get to know the system's features. After the free trial, you will have access to the **community free plan**, which allows you to work on a small project or test the system before deciding to upgrade. Signing up is quick and straightforward, requiring only basic information to get started.

![Sign-up page](/blog/sign-up.png)

[Check out our pricing and plans here.](/pricing/)

### Create a project and import translations

Once you have your account set up, the next step is to create a project within SimpleLocalize. The intro page will bring you straight to this part, where you can add your project name and choose languages you want to work with.

![Create project in SimpleLocalize](/blog/onboarding-create-project.png)

Projects serve as containers for your translation files and allow you to organize and manage your localization efforts effectively. Within the project, you can import your existing translations to get started quickly. SimpleLocalize supports a variety of file formats, making it convenient to import translations from different sources.

To **import your existing translations**, choose the file format that you use and choose extra options for the import. There are multiple options for importing translations: besides [uploading translation files in different formats](/docs/general/file-formats/), you can also upload translations using our [API](/docs/api/import-translations/) or [CLI](/docs/cli/upload-translations/).

![Import translations video](/blog/import-translations-from-xlsx.mp4)

> **Tip:** Instead of uploading translation files, you can start by adding a few custom keys and translate them for a quick test.


### Translate and use translation editor features

With your project set up and translations imported, it's time to dive into the translation process. SimpleLocalize provides an intuitive translation editor that allows you to easily manage and edit your translations. The editor offers a range of features, including **keyboard shortcuts, different viewing options, and customizable settings**, which you can access from the right side panel:

![Translation editor settings](/blog/translation-editor-settings.png)

These features enhance your productivity and provide a pleasant working experience. You can effortlessly navigate through your translations, make edits, and ensure linguistic accuracy.

Now, it's time to use the translation editor. Add a new translation, translate it with the auto-translate feature, and add screenshots or descriptions for easier translation key identification.

### Export ready-to-use translation files

Once your translations are complete, it's time to export them for use in your software or application. SimpleLocalize enables you to export your translations in ready-to-use file formats, ensuring compatibility with your development environment. Whether you need JSON, Excel, CSV, or any other supported format, SimpleLocalize has you covered. Like during the import, you can export translations using the SimpleLocalize CLI or API.

![Exporting translation files](/blog/export-translations.png)

Exporting your translations is a seamless process, allowing you to integrate them directly into your project and deliver localized content to your audience.

![YouTube: Import and export translation files video](https://www.youtube.com/embed/EU-N-hXRYxU)

## How to manage translations in SimpleLocalize?

SimpleLocalize translation editor gives you many options for managing translations. Invite translators to give them access to selected languages within the project, add descriptions and screenshots to help them in the translation process, or use the auto-translation feature that will do the translators' work in seconds.

### Add and manage translation keys

In the translation editor, you add translation keys manually. There may be multiple translation keys with translations in the selected language at once, and you can even assign them a namespace.

![Adding translation keys with translations](/blog/add-translation-keys.mp4)

To better describe the translation key location, you can add a **description** and **screenshot** to specify the key usage and location and make it easier for the translator to identify the translated content.

![Adding translation key description and screenshot](/blog/add-key-screenshot.mp4)

[Learn more about translation editor.](/docs/general/translation-editor/)

### Auto-translate

SimpleLocalize offers an efficient auto-translate feature that utilizes popular translation engines such as **DeepL and Google Translate**. This powerful tool enables you to quickly translate your content with just a few clicks, making it ideal for both quick translations and adding support for new languages to your project.

With the auto-translate tool, you have the flexibility to translate individual texts, providing valuable assistance to translators and accelerating the overall translation process. Additionally, you can choose to auto-translate all missing translations within your entire project or selectively in specific languages. This versatile functionality allows you to expedite the localization of your content and ensure comprehensive language coverage.

![Auto-translate option applied to a single translation](/video/single-auto-translate.mp4)

[Learn more about auto-translation tool.](/docs/general/auto-translation/)

### Create project backups

Creating backups of your translation data is a crucial foundation for your localization efforts. SimpleLocalize understands the importance of data security and provides backup options to ensure the safety of your translations. By creating backups, you can safeguard your work and have the ability to restore previous versions of your translations if needed.

Additionally, SimpleLocalize allows you to copy backups to new projects, making it convenient to replicate and transfer your translations from one project to another. With these backup features, you can have peace of mind knowing that your translation data is protected and easily accessible when required.

![Creating translation project backup](/changelog/manual-backups.png)

[Learn more about backups.](/docs/general/backups/)

## Integrating SimpleLocalize into your workflow

Integrating SimpleLocalize into your existing workflow is seamless and straightforward. Our TMS offers a range of integration options to ensure a smooth localization process. Here are a few ways you can integrate SimpleLocalize into your workflow:

### CLI (Command Line Interface)

SimpleLocalize provides a powerful Command Line Interface (CLI) that allows developers to automate translation tasks. With the CLI, you can easily sync your translation files, import/export translations, and perform various actions directly from the command line. This integration option simplifies the process and enables effortless integration with your development workflow.

[Learn more about SimpleLocalize CLI.](/docs/cli/get-started/)

### Webhooks

SimpleLocalize supports webhooks, enabling real-time notifications and triggering actions based on specific events. By setting up webhooks, you can receive instant updates about translation changes, auto-translation, new files, or other relevant events. This integration ensures that your workflow remains synchronized with the changes happening in SimpleLocalize.

[Learn more about webhooks](/docs/general/webhooks/)

### API (Application Programming Interface)

For more advanced integration requirements, SimpleLocalize offers a comprehensive API. The API allows you to programmatically interact with SimpleLocalize, giving you full control over your translation management. You can leverage the API to perform actions such as creating projects, importing translations, retrieving translation data, and more. This flexibility empowers you to seamlessly integrate SimpleLocalize into your custom workflow or existing systems.

[Learn more about SimpleLocalize API](/docs/api/get-started/)

By integrating SimpleLocalize into your workflow through the CLI, webhooks, or API, you can streamline your translation management process, automate tasks, and ensure smooth collaboration between developers and translators. SimpleLocalize's integration options provide the flexibility and control you need to optimize your localization workflow and deliver high-quality translations efficiently.

## Conclusion

SimpleLocalize is a user-friendly TMS that simplifies and optimizes the localization process for businesses. With its intuitive interface and seamless integration options, SimpleLocalize offers numerous benefits, including improved efficiency, enhanced translation quality, cost savings, scalability, collaboration, and centralized translation storage.

Getting started with SimpleLocalize is easy. You can create an account and explore the platform with a **14-day free trial in the Team plan**. Creating projects, importing translations, utilizing the translation editor, and exporting ready-to-use files are straightforward processes. For any doubts or questions, [feel free to contact us](/docs/general/support/)!


How to get started with a TMS: An introduction to SimpleLocalize


In this blog post, I will describe to you the most powerful feature of SimpleLocalize, the translation editor. 
It is an essential tool that helps managers, developers and translators in website, app, or any other type of digital content translations.

Localization became one of the most important steps in expanding customer bases and reaching to more people all around the world in their local language. 
It's a considerable task, but SimpleLocalize can help you to simplify the process and support you in daily translations work with great tools, that I describe below.

## Translations view

SimpleLocalize provides with two different views for editing translations. Each of them has specific features and is adjusted to user's role.

### Table View

Table view is a simple, and  at the same time powerful, default spreadsheet-like view. It can store thousands of keys and translations in multiple languages. 
It is easy to use for any type of user. To start translating, simply click on text input and enter your translation in the selected language.

![Translation manager table view](/assets/features/simple-translation-manager-table-view.jpg)

You can customize the table view with different options, to make your work more efficient. All view options you can find in the Settings button in the top-right corner of the table.

#### Languages filter
By default, the table will display all project languages. If you are a translator, you can select only languages that you need for your work, for example, source and target languages.


![Translation manager languages filter](/assets/features/translation-manager-filter-languages.jpg)

#### Key descriptions
Have you ever encountered a problem with locating the translation key and finding out where was it placed in your app? Key descriptions are great help in such cases. 

You can put some help text there, or even add a link to a screenshot with key location! The link with a screenshot of the location will be clickable, and it will open in a new tab automatically. **Key description will add more information and context to the key and save translators time**, so they don't need to search for details or ask other team members for guidance.

![Translation manager translation key descriptions](/assets/features/translation-manager-key-description-for-translators.jpg)

If you are using descriptions directly in your source code, you can also show them in the editor with **Code Description** option from view settings. 

#### Number of characters
Fitting translation texts in different languages to a fixed width element on your website or app, can be a challenging task. Use description column to determine maximum number of characters for keys in problematic locations, and translators will see their text characters count in the editor! 

![Characters count indicator in translation manager](/assets/features/translation-manager-characters-count.jpg)

Save time on counting characters, checking if texts fit well enough. Translation text summary setting in SimpleLocalize will help you control such cases from the start.

#### Auto-translation indicator
Have you already tried the [auto-translation feature](/blog/posts/how-to-use-auto-translation/)? It's **a great help in speeding-up the translation process** for all users! When a key is auto-translated, you can use the option to show the auto-translation indicator near the affected text area. It will look like this, showing the translation service:

![Auto-translation indicator in translation manager](/assets/features/translation-manager-auto-translation-indicator.jpg)

With that option, you can see which keys were auto-translated and need to be verified. Editing such a translation manually will remove the auto-translation indicator. Use that feature to revise and confirm your translations with ease!

#### Search and sort your keys
Do you care only about new or not translated keys? Use sort option to quickly see the newest keys, recently modified translations or missing ones! Search bar will help you find a key or translation text. Those simple filters help in your daily work, when you need to update specific translations, or add and translate new keys.

![Search and sort translation keys](/assets/features/translation-manager-sort-and-search-translations.jpg)

### List View

If you need a **simple list of all keys with their properties and translations**, switch to List View. It's a great option for more advanced projects that require specific information about the key or translation, like when it was created or its source file.

List view contains the list of keys separated in rows. You can expand each key to see translations for each language, key description and information when the key was created or last seen.

![SimpleLocalize translation list view](/assets/features/translation-manager-list-view.jpg)

Another option for the list view is **Side-by-side view**. It splits the view into two columns, so you can see two languages at one. Set the source at the left and target language on the ride side of the view. Below, you can show more information like key details, key or code descriptions.

![SimpleLocalize translation list view](/assets/translation-editor-interface-side-by-side.png)


#### See all your keys

In this view, you can see all your project keys at once, and it's a great option for bigger projects, as it can easily store and display multiple keys. In just one view, you can see the progress of translations to all languages for each key and quickly check translations for selected language with  view options.

![Quick translations reviewing](/assets/features/translation-manager-for-quick-review.jpg)

Moreover, list view has options to **sort and search translations**, as it works in table view.

#### For longer texts

List view is a **great option for translating longer texts**. In view settings, you make text areas bigger and choose the option to wrap text, so you can see all content without scrolling or expanding the area manually.

![Translation editor for long translations](/assets/features/translation-manager-for-long-translations.jpg)

The option to show text summary with number of characters, words and white spaces will help you to control the text length.

#### Key namespace for multi-file translations

If you are using [translations uploaded from multiple files](/docs/cli/upload-translations/), the list view can show you the key namespace (like file path). With that option, you can see from which file the key was uploaded, and that is very useful when you want to upload only the keys from your landing page (one of multiple folders) or from just one language.

![Translation management and namespaces](/assets/features/multi-file-namespaces.jpg)

Learn more about [uploading and downloading translation files with CLI and multi-file option](/blog/posts/multi-file-upload-download/).

#### Customer-specific translations

List view gives you an option to **translate your keys in multiple versions for one language**. This feature, [customer-specific translations](/blog/posts/customer-specific-translations/), allow creating different translation version for specific customer's need. With that feature, you can tailor your app to your customer's needs or requirements, without changing the text and their meaning for other users of your product.   

![Customer specific translations](/assets/features/translation-for-every-customer.jpg)

## Translation management

Wondering how to start with SimpleLocalize? [Sign in with our free community plan](/register/) and [upload your translations](/docs/general/import/). You can do it by importing an Excel file, with API or CLI. With your keys in the system, you can start translating them, adding more languages and sharing the project with your team. [Use auto-translation feature](/docs/general/auto-translation/) to quickly translate your keys to new languages. 

For any doubts, contact Jakub, the creator of SimpleLocalize at jakub@simplelocalize.io.


Translation Editor Explained


**[Auto-translation](/docs/general/auto-translation/)** is a powerful feature which helps you translate your app, website, game or other digital content to multiple languages with just one click.

Using [machine translation services](https://en.wikipedia.org/wiki/Machine_translation) for auto-translations can be extremely helpful to those who want to expand their reach on a global level without having to hire translators. Auto-translation works great for a start of app localization process, it creates translations instantly and with great results.

## How auto-translation works?

SimpleLocalize is integrated with two most popular machine translation services, [DeepL](https://www.deepl.com/translator) and [Google Translate](https://translate.google.com). You can choose between those two providers for the best translation results for your project.

**Google Translate** is a well-known translation service, and it [provides a significant number of available languages](https://cloud.google.com/translate/docs/languages). It's a great option if you need a translation to a less popular or uncommon language.

**DeepL** provides sightly more accurate translations than Google Translate and works better with idioms and slang. What's important in web translations, it can **preserve custom translation format like HTML**. DeepL works really well with texts written in Markdown. It [offers 24 languages](https://www.deepl.com/docs-api/other-functions/listing-supported-languages/) with many varieties, e.g., Portuguese and Portuguese (Brazilian). A really nice feature is also **tone formality** — you can select between formal or informal version in selected languages.

![How to start auto-translation for many languages at once (March 2023)](/video/auto-translation.mp4)

Auto-translation by default won't override your existing translations, unless you decide to replace them. You can auto-translate only selected languages or all of them at once. Translations will be based on the source language, the best matching one for the machine translation service.

### Auto-translation options

- **Excluding variables from translations**. You can exclude selected text from auto translation using brackets `{` and `}` or another character type like `[]`, `<>` or `()`. Simply wrap the text, like here: `There are {charsCount} characters left`, to exclude it from translation. This option will help you translate texts with code snippets inside.

![exclusion dialect](/blog/translation-exclusion-dialects.png)

- **Excluding selected words or phrases**. In Auto-translation settings, you can create a list of words or expressions that will be excluded from auto-translation. You can put there your company name or other proper names that you don't want to get translated.

![auto-translation settings](/blog/translation-excluded-words-or-phrases.png)

- **Auto-publishing translations** to CDN to the latest environment – if you are using SimpleLocalize translation hosting, auto-translated keys can be deployed to your development or staging environment directly.
- **Translating keys** if no translation is available – if your source language has no translation, SimpleLocalize can use the key to work as the source for your translation.

With auto-translation, you can translate your app or website to a new language with just a few simple steps that we describe below.

## How to translate your app with Google Translate or DeepL?

There are only **3 simple steps** to auto-translate your app or website using SimpleLocalize. First, import your existing keys and translations to SimpleLocalize. Second, run auto-translate option. And final step, export ready to go translation files and add them to your project repo, or upload them with one click using SimpleLocalize translation hosting.

### Import your translations to SimpleLocalize

There are multiple ways of importing translations to SimpleLocalize. You can use **Excel, JSON or CSV file formats or import them automatically using CLI or API**. Check out [documentation](https://simplelocalize.io/docs/general/import/) for all details and instructions.

![Import translations window](/blog/import-translations.png)

### Start auto-translation

When your existing translation files are already imported to SimpleLocalize, you are good to go and start working on missing translations or add new languages to your project.   Auto-translation is a great help in the translation process. It can speed up the translation by providing a base for translator's review.

#### Auto-translate single translation

Sometimes you just need some help with translating a single translation key. Here comes our **quick auto-translate option, which you can use directly in the translation editor** in all editor views. Just click on the auto-translate icon in the language you are working on, confirm the settings and source language and hit Auto-translate.

![How to auto-translate a single string in Translation Editor](/video/single-auto-translate.mp4)

Within a second, you can have a ready translation, without copying and pasting texts back and forth to the editor and machine translation provider.

#### Auto-translate languages

To translate all translations from selected languages, or all languages at once, go to the Languages. There, you can use the option **Start auto-translation** for selected language or **Auto-translate all** to use machine translation for all languages (more selected ones) with one click.

![Auto-translate language](/blog/auto-translate-languages.png)

When you choose one of those options, you will see auto-translation settings with extra options. Select a translation service (DeepL or Google Translate), decide on extra options and start translation. You will see translation progress in the languages view.

![Start auto-translation window](/blog/auto-translation-window.png)

### Export translations for your project

When the translations are ready, you can [export the files](/docs/general/export-translations/) and **upload them to your project** source code. Translation can also be updated automatically with SimpleLocalize [CLI](https://simplelocalize.io/docs/cli/upload-translations/) or [CDN hosting](https://simplelocalize.io/docs/general/translation-hosting/).

![Export translations to file](/blog/export-translations.png)

Automatic translation option is available in all SimpleLocalize plans, you can test it now and see how it works in your project. [Create account](https://simplelocalize.io/register/) in SimpleLocalize to start managing translations more efficiently and expand your business to new levels.


![YouTube: How to quickly auto-translate JSON files?](https://www.youtube.com/embed/bJf2TY1dRiM)


## Auto-translation advantages

Translating a website or app is a significant step in the process of expanding your business. It is a necessary part of localization, and will help you reach more customers who don't speak your native language.

There are many benefits to auto-translation, such as saving time and money on translation services. It also allows you to translate your website into any language without having to know the language yourself. It significantly speeds up the translation process, and using a translation management system, like SimpleLocalize, will help you to keep track of all changes in your project localization. 


How to use auto-translation?


## What is machine translation?

Machine translation (MT) or Automated translation (AT) is the process of automated translation provided by a translation service or software (e.g., Google Translate or DeepL). MT is the process of translating text or speech from one language to another.
Automated translation is a relatively new development. It is aimed at making ubiquitous and useful information accessible to a global audience. 

Different languages have different words for the same things. For example, when you say "hello", people from different countries have different ways of responding.
Some languages make it easier for you to understand them by making the subject disappear after the verb, or making it personal: "Good morning". Other languages require additional information to be understood, 
and force you to attach information to the end of the verb: "Be nice". Not all languages use "be nice" as a completely objective sentence, but most do.

## How does it work?

SimpleLocalize takes all available translations and tries to match the best translation source for a given service (e.g., Google Translate and DeepL). Usually, English translations are taken as the best translation source.
If an English translation is not available for some reason, SimpleLocalize will try to use another language translation. English messages are considered as the best source, and they provide the best results due to fact there is no additional translation step, for example `Polish > English > German`. Not every language is translated directly from one to another. In many cases the step between is needed, which may result with inaccurate translations or even losing context.

## Using DeepL for automated translation

![text with source code translated in DeepL](/blog/app-auto-translation-deepl.png)

In DeepL, all code variables stay untouched during translation process. Here is the HTML example.

```html
<div class="text-bold button">My bold text</div>
```
Please note that the `class` variable and value `text-bold button` are not translated. Great job DeepL!


## Using Google Translate for automated translation

![text with source code translated in Google Translate](/blog/app-auto-translation-google-translate-example.png)

Google Translate is much better in translating longer text with more sentences. However, it cannot always translate text with application source code.
In the example above, the source code has been translated as well together with texts. Now it becomes:

```html
<div klasa="tekst-pogrubiony przycisk">Mój pogrubiony tekst</div>
```

This may cause additional work for software teams because every auto-translated message must be adjusted manually.
Often, SimpleLocalize can extract text from a message to prevent such situations.

## DeepL vs Google Translate

**There is not much difference between those two services in general.** DeepL has advantage that they keep application source code context. In most cases, DeepL
translation output is very accurate for short sentences. Google Translated is a much cheaper solution if you use it for large translation volumes.
Google Translate is better in translating longer texts with multiple sentences, while DeepL can have hiccups.

## How to start using machine translations in app?

**Upload your translations** to SimpleLocalize. You can do it on various ways:
- [API file import](/docs/api/import-translations/),
- [Add translations using API](/docs/api/add-translations/),
- [Upload translations with CLI](/docs/cli/upload-translations/),
- [import translation file manually](/docs/general/import/).

Learn more about [supported file formats](/docs/general/file-formats/).

![translation messages in translation management software](/blog/all-translation-keys-from-application.png)

Once you're done with the import step, you can start adding languages in the 'Languages' tabs.

## How to use auto-translation feature?

![how to use automated translations in SimpleLocalize](/blog/start-auto-translation.png)

**It's simple! Add a new language, click 'Start auto translation' button** next to the language which you want to translate and wait for the results. 
Usually, this process doesn't take more than 5 minutes for big projects with about 5000 translation keys. 

![example of auto translated texts in SimpleLocalize editor](/blog/auto-translated-texts.png)

Translation messages, which have been auto-translated, have a small provider logo next to the input to indicate it has been translated 
automatically. This icon will disappear once you edit translation manually.

## How much does it cost?

**It's free, seriously!** You can translate your application for free with SimpleLocalize. [Our free plan](/pricing#free) allows you to keep 50 translation keys with 
**unlimited number of hosted words, unlimited languages and unlimited number of modifications**.
You are limited to 3 translation jobs per a month in the [SimpleLocalize Community Plan](/pricing#free) and 10 translation jobs in the [SimpleLocalize Developer Plan](/pricing).
The [Team and Business plans](/pricing) has unlimited access to the auto translation feature.

[Try it for Free](/register)


How to translate app automatically?


Software updates can be challenging and yet with every deploy, you must remember about updating your keys, translations, and content. Keeping all text up to date is a key for a perfect impression on the released features. How do you work with translations, do you keep them up to date with every release? See our tips below for the effective translation management. 

## Why should you keep an eye on translations with every software update?

No one likes to read empty keys instead of clean, nicely translated texts. But there are more reasons to watch and control the translation and localization process. They are both important for the overall perception of your site's content. Why is that so?

- **Untranslated keys make the worst impression of your product**. Using keys and texts, you communicate with your users — missing translations give the impression of carelessness, are unprofessional. You don't want your customers to think of you and your product in such categories, for sure. 
- When adding new features and translations to them, do not forget about localization. **Localized text show your customers that you care**. You want your software to be fully adjusted and tailored to the language they use in everyday life. Remember to adjust the content, names of the features and new options to your customers' culture.
- **SEO**. Not translated content or texts copied from an automatic translator are a nightmare for your Google ranking. When adding a new feature, do not forget to share it on your blog and social media too!
- **Not updated translations can be misleading not only for your customers but also for you and your team**. What did that “Disable All” button mean? Was it deactivating all updates or only part of them? If you are not updating texts on a regular basis, you will waste your time later to check and update all keys. 

## How to keep your software translations up to date?

First, plan it. Think of the translation process of your software, what are the weaknesses in your current solution, and how can you improve it? Who will be responsible for the translations, and at what stage of development? What the whole process should look like? 

![application source code with translated messages](/blog/find-and-upload-translations-in-source-code.jpg)

We prepared 3 tips that should help you in keeping the translation process on track. 

### 1. Planning translation process.

When adding new content or changing existing features, you need to remember about adding and updating translations in all languages. How to keep this process in track? 

The translation process needs to be controlled by a human being, though it is prone to errors or mistakes. However, to prevent any issues, make the process as easy and smooth as possible. Complicated operations, tasks in such small thing as it seems, makes the translations a secondary issue.

Start with simple steps. 
- When a development team makes changes, notify the person responsible for translations about new keys to translate. It can be done by the developer with email or automatically. With SimpleLocalize, notification about a new update are sent to selected users, so they can start working on translations.
- Translator translates the changes and publish to development or live environment.

### 2. Updating translations.

Updating translations directly in the code may be challenging, and it means that only developers can change them. Great if they have language skills, but what if you ask a professional translator for help? Imagine updating Excel files with translations, adding it to your code, again and again when a new feature is released. Not the best and fastest option to keep the process smooth and easy.

Instead, think of using an external **software to manage your translations online, in simple translation editor**. SimpleLocalize is a great help for all changes in translations that can be deployed immediately to your app with [SimpleLocalize CLI](https://simplelocalize.io/docs/cli/get-started/). You can **give access to the editor to any team member** to adjust translations in development environment only or in the live version. See the history of all changes, the latest releases and old text versions. Managing multiple languages in one place really helps in keeping translations up to date. 

![translation editor with deepl and google translate logo](/blog/cloud-translation-editor-with-deepl-and-google-translate.jpg)

### 3. Checking and removing unused translation keys.

When was the last time that you deleted unused translations? 
Over the years of creating and developing software, we add lots of new keys. However, we tend to forget about old translations that are no longer used, and to which we are unlikely to return. 

To keep translations up to date, check the age of your translations, if they are used or not updated in a long time. Outdated translations take storage and create disorder in your files. Especially when there are a bunch of such translations.

It may be difficult to check that information in the code, but in SimpleLocalize you can **check not used translations or those that are not updated or pushed to live version in a long time**. Just check the list and remove them from your code to clean up your software. 

![approved translation window with search and trash icon](/blog/how-to-find-unused-translation-keys.jpg)

## What to do next with translations?

**Start simple** — try the **[free version of SimpleLocalize](https://simplelocalize.io/register/)** to see how it can help you to manage your translations and keep them up to date. You can [register to SimpleLocalize](https://simplelocalize.io/register/) with one click and connect your project to update translations automatically in a nice-looking app. Are you ready to get started? 

For any questions about SimpleLocalize, do not hesitate to [contact Jakub](https://simplelocalize.io/docs/general/support/) directly, he knows it all about translations! 😎


How to keep translations up to date?


React localization is one of the topics discussed vividly among developers. There are many [i18n libraries built for React, React Native, and NextJS](/blog/posts/the-most-popular-react-localization-libraries/), that focus on app internationalization. Website or app translation is so important because it positively affects the product visibility and performance, increases the customer base and satisfaction by creating a special relation. It's all thanks to **adjusting the product to their language, customs, and culture**. Developers have a great choice of tools and libraries that can help them in i18n of the product, and one of them is FormatJS. 

## About FormatJS

 FormatJS, originally yahoo/react-intl, is a localization and internationalization set of libraries built mainly for React apps. It helps in i18n process, focusing on **numbers, dates, and strings formatting**. It provides i18n tools and packages that help with localization and app translation management.

A sample i18n file structure in FormatJS looks like this: 

```bash
projectRoot
|-- src
|   |-- App.js
|-- lang
|   |-- en-US.json
|   |-- fr.json
|-- package.json
|-- .eslintrc.js
```

In `lang` we create json files with supported languages, for example, `en-US` or `fr`. FormatJS focuses or improving development process of app internationalization and helps in future translation management.

## How to translate React app with FormatJS?

The installation and translation process is quite straightforward. We will start with creating a sample project, then FormatJS installation and setup, and finally building and translating our app. Sounds fun, right? 😎

### Create a sample project

Let's start with something simple. I will create a new project using [create-react-app](https://github.com/facebook/create-react-app). Use NPM or Yarn like in the example below.

```bash
yarn create react-app simplelocalize-react-intl-example
```

Or download the [demo app from GitHub repository](https://github.com/simplelocalize/simplelocalize-react-intl).

### Install dependencies

Add `react-intl` library to your newly created project.

```bash
# Using NPM
npm i -S react react-intl

# Using yarn
yarn add react react-intl
```

### Add Language Context

In this project, I will use `Context` to keep translations and option to change language in real-time.

```jsx
import React from 'react';

const LanguageContext = React.createContext("en");

export default LanguageContext;
```

Read more about [React Context API](https://reactjs.org/docs/context.html).

### react-intl configuration

Let's create main configuration for i18n with react-intl and SimpleLocalize wrapper.

```jsx
// 📦 file: ./SimpleLocalize.js

import React from "react";
import {IntlProvider} from 'react-intl'
import LanguageContext from "./LanguageContext";

class SimpleLocalize extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      messages: undefined,
      language: "en"
    };
  }

  componentDidMount() {
    this.setupLanguageMessages(this.state.language);
  }

  setupLanguageMessages = (language) => {
    const projectToken = "5e13e3019cff4dc6abe36009445f0883";
    const translationsUrl = `https://cdn.simplelocalize.io/${projectToken}/_latest/${language}`;
    return fetch(translationsUrl)
      .then((data) => data.json())
      .then((messages) => this.setState({language, messages}));
  };

  render() {
    return (
      <LanguageContext.Provider
        value={{
          changeLanguage: (language) => this.setupLanguageMessages(language)
        }}>
        <IntlProvider
          locale={this.state.language}
          messages={this.state.messages}>
          {this.state.messages ? this.props.children : null}
        </IntlProvider>
      </LanguageContext.Provider>
    )
  }
}

export default SimpleLocalize;
```

This wrapper will keep translations in our `LanguageContext` and it will also provide a function to change language in fly.

## Translate your app with FormatJS and SimpleLocalize

Now, it's time to work on i18n and localization process. We use SimpleLocalize to extract translation keys and as a translation management and i18n online editor.


### Create project

Create a [SimpleLocalize.io](https://simplelocalize.io) project to get your unique `messages` variable. For this demo project, you can use the `messages` from the example above!

### Wrap your application

Now let's use our newly created `SimpleLocalize` wrapper to provide translations for React application.

```jsx
// 📦 file: ./index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import SimpleLocalize from "./SimpleLocalize";

ReactDOM.render(
    <SimpleLocalize>
      <App/>
    </SimpleLocalize>,
  document.getElementById('root')
);
```

Done! React will now fetch translations from SimpleLocalize CDN and provide them to your app.
Let's check how to use it in the source code.

## Translating React app

Now, let's start using translations, and create a basic web page.

### FormatJS setup

See below how to apply translations for your React app. For that, we will use FormattedMessage component which wraps up all translation keys.

```jsx
// 📦 file: ./App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import {FormattedMessage} from "react-intl";
import LanguageContext from "./LanguageContext";

function App() {

  return (
    <LanguageContext.Consumer>
      {context => (<div className="App">
        <header className="App-header">
          <div>
            <p>
              <FormattedMessage id="USE_BUTTONS_BELOW"/>
            </p>
            <button onClick={() => context.changeLanguage("en")}>English</button>
            <button onClick={() => context.changeLanguage("es")}>Spanish</button>
            <button onClick={() => context.changeLanguage("pl")}>Polish</button>
            <hr/>
          </div>

          <img src={logo} className="App-logo" alt="logo"/>
          <p>
            <FormattedMessage id="DESCRIPTION"/>
          </p>

          <a
            className="App-link"
            href="https://simplelocalize.io"
            target="_blank"
            rel="noopener noreferrer"
          >
            <FormattedMessage id="LEARN_MORE"/>
          </a>
        </header>
      </div>)}
    </LanguageContext.Consumer>
  );
}

export default App;

```


### FormattedMessage component

`<FormattedMessage/>` usage is very easy:
```jsx
<FormattedMessage id="YOUR_TRANSLATION_KEY"/>
```

React will convert `FormattedMessage` tag into `span` tag and put concrete translation into it. You can also use `<FormattedHTMLMessage id="TRANSLATION_WITH_CSS"/>` which will also produce a message with HTML inside `span` tag.

A sample translation key could look like the following:

```shell
TRANSLATION_WITH_CSS = This is my <strong>text</strong>
```

### Switch between languages

In the presented example, I used `LanguageContext.Consumer` to provide function. This function can trigger language change and fetch proper messages from the CDN.

```jsx
 <LanguageContext.Consumer>
      {context => (<div className="App">
        <header className="App-header">
          <div>
            <p>
              <FormattedMessage id="USE_BUTTONS_BELOW"/>
            </p>
            <button onClick={() => context.changeLanguage("en")}>English</button>
            <button onClick={() => context.changeLanguage("es")}>Spanish</button>
            <button onClick={() => context.changeLanguage("pl")}>Polish</button>
            <hr/>
          </div>
          //...
        </header>
      </div>)}
    </LanguageContext.Consumer>
```

You need `Language.Consumer` tag only in places where you would like to change the language. It's not needed for `<FormattedMessages/>` tags.

### Let's try it!

Note that translation works in real-time! How cool is that? Very cool!

![React Localization with FormatJS](/blog/formatjs_and_react_app_localization.mp4)

[See live version](https://react-intl.simplelocalize.io)

Project code is available on [GitHub](https://github.com/simplelocalize/simplelocalize-react-intl).

## Translation management for FormatJS

FormatJS is a great tool for translating your React app. It is intuitive and not too complicated to introduce to your project. Using react-intl together with SimpleLocalize can really speed up the translation process with great [auto translation tools (DeepL or Google Translate)](https://simplelocalize.io/docs/general/auto-translation/), many integrations and easy to use [i18n online editor](https://simplelocalize.io/i18n-editor-online/). It's a great help in development process thanks to [SimpleLocalize CLI for FormatJS, which extracts all translation keys](/docs/integrations/format-js-cli) from your project with a simple command.

![i18n online editor](/assets/translation-editor-interface.png)

Check our docs for [FormatJS integration](/docs/integrations/format-js/) in SimpleLocalize and translate your app in our feedback-driven app. Get in touch or send us your feedback at [contact@simplelocalize.io](mailto:contact@simplelocalize.io).


FormatJS and React application localization



## i18next - Background
We took original post inspiration from an awesome guy called [Aryclenio Xavier Barros](https://dev.to/aryclenio), who presented a sample app for localizing app with i18next. You can [read it here](https://dev.to/aryclenio/internationalizing-your-react-app-with-i18next-43op). 
We expanded the idea by adding a section about integrating i18next with translation management system. 


## How to start with i18n in ReactJS?

Thanks to that ReactJS is super popular library, we got so many options. The most popular i18n libraries are i18next and yahoo/react-intl. Today, I will show you how to integrate i18next into your ReactJS application.

## Create a sample project

I will start with very beginning, and I will create sample app in ReactJS with TypeScript

```bash
yarn create react-app simplelocalize-i18next-example --template typescript
```

## Install dependencies

```bash
# Using NPM
npm install --save react-i18next i18next i18next-http-backend i18next-browser-languagedetector axios

# Using yarn
yarn add react-i18next i18next i18next-http-backend i18next-browser-languagedetector axios
```

Now we are ready to start!

## Configuring i18next

I will create `i18n.ts` file where I will put whole i18next configuration, and after that, we will import this file in `index.ts`.
My `i18n.ts` looks as following:

```tsx
import i18n from 'i18next'
import Backend from 'i18next-http-backend'
import LanguageDetector from 'i18next-browser-languagedetector'
import { initReactI18next } from 'react-i18next'
import axios from "axios";

const fallbackLanguage = 'en'

const projectToken = ""; // YOUR PROJECT TOKEN
const apiKey = ""; // YOUR API KEY

const loadPath = `https://cdn.simplelocalize.io/${projectToken}/_latest/{{lng}}`;
const addMissingTranslationsEndpoint = `https://api.simplelocalize.io/api/v1/translations`;

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use (initReactI18next)
  .init({
    fallbackLng: fallbackLanguage,
    backend: {
      loadPath: loadPath
    },
    saveMissing: true,
    missingKeyHandler: (lngs, ns, key, fallbackValue) => {
      // optional step
      const configuration = {
        headers: {
          'X-SimpleLocalize-Token': apiKey
        }
      };

      const requestBody = {
        content: [
          {
            key: key,
            language: fallbackLanguage,
            text: fallbackValue
          }
        ]
      }
      axios.post(addMissingTranslationsEndpoint, requestBody, configuration)
    }
  })

export default i18n;
```

## Project `loadPath` variable

Create a [SimpleLocalize.io](https://simplelocalize.io) project to get your unique `loadPath` variable. For this demo project, you can use the `loadPath` from the example above!


## Create missing translation keys automatically

I used property `saveMissing` with value `true` to tell i18next to function `missingKeyHandler` to automatically when the library won't find a translation key.
Create on backend missing translation keys with default translation.



## Enable `i18next` in application

Configuration is completed when you import `i18n.ts` file in `index.ts` just by adding `import './i18n';` Whole `index.ts` file should look like this:

```tsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import './i18n'; // import i18next configuration (!!)

ReactDOM.render (
  <React.StrictMode>
    <Suspense fallback={<div>Loading...</div>}>
        <App />
    </Suspense>
  </React.StrictMode>,
  document.getElementById('root')
);
```

We are done! i18next library is ready to use.

## Using translations in the app

Now, let's use translations, and create a basic web page. 

## Import `useTranslation` hook

To import the i18next hook, we use the following code:
```tsx
import {useTranslation} from "react-i18next";

function App () {
  const {t, i18n} = useTranslation ();
  //...
```

The `t` variable is a function used to load translations for a given key.

## Using `t` in application code

`t` usage is very simple and clean:
```jsx
t("USE_BUTTONS_BELOW")
```

in HTML, it would look like the following:

```tsx
 <p>{t("USE_BUTTONS_BELOW")}</p>
```

## Switching between language

Now it's a time to add option to switch languages. I will use simple buttons without any fancy CSS styles. :) I added 3 buttons for English, Spanish and Polish language.

```tsx
import React from "react";
import "./App.css";
import { useTranslation } from "react-i18next";

function App() {
  const { t, i18n } = useTranslation();
  return (
    <div>
          <p>
            {t("USE_BUTTONS_BELOW")}
          </p>
          <button onClick={() => i18n.changeLanguage("en")}>English</button>
          <button onClick={() => i18n.changeLanguage("es")}>Spanish</button>
          <button onClick={() => i18n.changeLanguage("pl")}>Polish</button>
        </div>
  );
}

export default App;
```

## Let's check it!

Notice that translation is done in real-time! How cool is that? Very cool!

![React Localization with i18next](/blog/i18next_localization_with_SimpleLocalize.gif)

[see live version](https://i18next.simplelocalize.io)

Project code is available on [GitHub](https://github.com/simplelocalize/simplelocalize-i18next).


Translation Hosting

SimpleLocalize CLI

REST API

Auto-translation

Alternative translations

Tutorial