I easily translated my React.js applications into multiple languages. Here is how... 🤯

Translating an App to multiple languages (localization) is tricky part of many applications.

Tolgee is simplifying the localization process and saves developer's time by removing repetitive tasks 🔁 ❌

Saving time? That's what I want. Show me how to localize my React app!

---

What is Tolgee

Tolgee is an open-source i18n tool combining localization platform and SDKs to provide simple way to translate the web applications for both developers and translators.

Tolgee is not just another software localization platform offering integrations that only syncs local data with the backend. Instead, Tolgee is truly integrated into your app via SDKs.

In context translating 📖

As a developer of localized application, you probably have to modify localization data every time you need to change a text.

So you have to open the file, add or find the key to modify, save it and check whether everything was changed correctly in the app.

With Tolgee you can just ALT + click the actual translated text in your app and 💥boom💥 translation dialog appears and you are able to translate it right away.

Automatic Screenshot Generation 📸

Another tricky part of localization is providing context to translators. Only exporting the keys and translations in source language is not always enough.

Tolgee enables you to take and upload screenshot directly in the in-context translation dialog. So no more manual taking and uploading screenshots.

Localization platform included ✅

Tolgee is also localization platform, where you can manage all your localization strings. You can provide access to translators and they can translate the texts there.

If you have uploaded screenshots before, they know the context of the translations perfectly and can produce perfect results.

Isn't that hard to integrate? No it's not!

To get started, you can simply follow the integration guides provided in the platform.

1. Login to Tolgee Cloud or use your self hosted Tolgee instance.

2. Create a new project by clicking Add button in the top right. Fill the project name.

   

   Optionally, you can add multiple languages to translate your app into.

3. Select Integrate from side menu, choose React (Vite) and generate an API key with all scopes checked.

1. Success! 🎉 Now you just have to follow the integration guide.

Let's integrate it into React App

1. Generate brand new React App and open it your favorite editor

   npm create vite@latest tolgee-hello-world -- --template react-ts
   # follow the vite guide
   

2. Install Tolgee packages ⬇️

   npm install @tolgee/react
   

3. Add Tolgee properties to you development .env file env.development.local by copying it from the integration guide

   VITE_APP_TOLGEE_API_URL=https://app.tolgee.io
   VITE_APP_TOLGEE_API_KEY=<your API key>
   

4. Wrap your App component in main.tsx with TolgeeProvider component. Again, you can copy it from the integration guide.

5. Go to App.tsx and replace all the crap with simple "Hello world!" message.

   import './App.css';
   
   function App() {
     return (
       <div className="App">
         <h1>Hello world!</h1>
       </div>
     );
   }
   
   export default App;
   

6. Wrap the "Hello world!" with <T> component and add keyName prop.

   import './App.css';
   import { T } from '@tolgee/react';
   
   function App() {
     return (
       <div className="App">
         <h1>
           <T keyName="hello_world">Hello world!</T>
         </h1>
       </div>
     );
   }
   
   export default App;
   

7. Let's run the App in the browser and see the magic! 🪄

   Hold your ALT key and move your mouse over the text. It should be highlighted.
   When you click it, dialog opens and you're able to edit the text or generate screenshots.

   

   After you hit the update button, your Hello World! text will be immediately changed to the new value!

Congratulations! You're done! 🎉🎉🎉

Now you are able to translate your React applications. To learn more about Tolgee or to find out how to translate more complicated cases, visit our docs.

---

Tolgee - Developer friendly localization tool

Tolgee helps teams localize apps effortlessly. We make translation simple with real-time updates and easy integration into your workflow.

Say goodbye to complex file management and focus on building great products. Fast, smooth, and built for devs.

If you like this tutorial, please help us with a star. It would help us to create more articles like this 💖

Star the Tolgee repository ⭐

Comments

[willjohn22]

Great! I was looking for self-hosted alternative to Lokalise. This looks amazing, finished the tutorial in few minutes.

[Ferguson]

Yeah, the Lokalise pricing is just ridiculous.

[Jan Cizmar]

🤠

[Jan Cizmar]

Thanks! 🚀

[Nevo David]

Super cool, I am going to translate my app:
github.com/gitroomhq/postiz-app
with it :)

[Jan Cizmar]

Great! Just ask if you have any any questions! :)

[Sammy Scolling]

Hey! Thanks for sharing this. Will go thru this tomorrow.

[hdeyana]

It is great tool, been used for biggest streaming platform in Indonesia, visionplus.id

Kudos team tolgee

[Marketa Cizmar]

that's awesome, thanks for sharing that! Excited that Tolgee is used in Indonesia

[Jan Cizmar]

Thanks a lot!

[Zack]

Is it also possible to use it with Vue.js?

[Jan Cizmar]

Hey! Yeah. Tolgee has also an integration to Vue.js. tolgee.io/integrations/vue

[Zack]

Awesome! I will test it on my project.

[Marketa Cizmar]

Great! Let us know how did it go.

[Deb]

This is pretty cool. All the localization options are pretty expensive. Is this going to be available of Webflow or Wordpress or Framer at some point?

[Jan Cizmar]

Hey!
We are looking for ways how to integrate it to these. Framer is based on React, so this might be simple one. We have some ideas for Wordpress too. :) Stay tuned!

[Steven]

how do you prevent editing of the strings in production?

[Jan Cizmar]

Hey! In the production mode, you should never leak your API key and so Tolgee SDKs don't fetch translations from the REST API. Instead, you can choose from several ways, how to provide static data to the Tolgee instance.

tolgee.io/js-sdk/providing-static-...

[David]

Looks neat, thanks for sharing

[Marketa Cizmar]

Thanks!

[dawoodkarim]

Nice one! Localization was always kind of pain for me and Tolgee looks promising.

[Jan Cizmar]

Thanks a lot!

[Christian Engel]

So, wait: this basically integrates a ton of javascript into your app just to translate it? What happens when you deploy it? How is all of this being removed upon build time or do you just ship it to the users and hide it away from them? Are localizations always loaded from the tolgee servers?

There are so many red flags here :(

[Jan Cizmar]

Hey! Great questions!

All the dev tools are removed when the app is built, and only the basic functionality, similar to any other i18n solution, is kept in the resulting build. Tolgee JS is modular, so you don't have to include what you don't like and write your own plugins if you wish.

We recommend against using localization data from Tolgee REST API for production builds, since it can be slow and you don't want to rely on the Tolgee servers. There are multiple ways how to serve the data to the clients. You can export the data (using the CLI or via REST API) and bundle them with production build, you can use Content Delivery, which deploys the data to Global CDN or you can host the data somewhere else and handle that yourself.

[Christian Engel]

Thanks for the clarification! It was not exactly clear that the in-place editor would not be bundled along with the application (its still not clear to me if its actually not bundled or just hidden away from the user).

Also there seems to be no documentation about how you would actually download the language files upon build, store them in your project and bake it into your app.

This gets even more complicated when you have multiple languages for your app. You should NOT write all your language strings into the JS bundle.

I suggest getting the docs crystal clere on this matter - but you are on a very good way and I wish you best of luck with your project!

[Jan Cizmar]

Hey!

its still not clear to me if its actually not bundled or just hidden away from the user

It's really not bundled. It works the same as with React.js. When you build for production. Different bundle is used. You can check the code.

But we might add this to FAQ section. :)

This gets even more complicated when you have multiple languages for your app. You should NOT write all your language strings into the JS bundle.

There are several ways how to provide the data to Tolgee JS. Different approaches are optimal for different cases. You can read more here.

[Steven]

we use tolgee i18n and it almost doesn't affect the bundle size.