DEV Community

Cover image for Tolgee: i18n revolution for modern JS frameworks; And it is open-source
Jan Cizmar Subscriber for Tolgee

Posted on

Tolgee: i18n revolution for modern JS frameworks; And it is open-source

Hi all,

I am Jan from Tolgee. A few years ago I had an idea to create a tool that enables me and my team to simplify the localization/i18n process and enable non-programmers to modify localization strings without Git knowledge and anything. I started to develop the project and now, a few years after, we have a production-ready working solution. So let me explain what it does and why you should consider using it.

What is internationalization/localization/i18n/l10n?

Basically, if you're using some i18n library, enabling you to translate strings (like button labels, page titles, etc.) in your app to different human languages, you are doing internationalization. If you are actually translating the strings or preparing your app for usage in a specific region, you are doing localization. The i18n / l10n are just abbreviations for these two terms, where 18 and 10 mean the number of characters omitted in the word.

(simplified explanation)

What's Tolgee?

Tolgee is a localization platform that also provides its own integration libraries. It provides many great features making the app localization a piece of cake.

Image description

There are many i18n libraries out there. Why should I use Tolgee?

Tolgee can do a lot more than just traditional i18n library. It doesn't only provide the different strings for different languages, but it also enables you to change the strings directly in the app you are currently working on. It also allows others to translate/modify/fix strings in your app. Even your grandma, your aunt, or your Armenian friend from studies abroad.

It is also a localization platform, where you can translate your strings, while it suggests results from various third-party translators like Google Translator or DeepL.

It also enables developers to provide screenshots from the app in one click, so translators know the context and don't provide wrong translations. Which happens a lot btw.

And much more...

Image description

Why there are wrong translations on the Internet?

In most cases, it's because translators don't know the context of what they're translating. They see just the source string, but they don't see what's around it. So they have to guess the context, which leads to extremely wrong results. Let me explain with an example.

I am a Czech native speaker so I am using Netflix App translated to Czech. Once I opened the login page of the app. There was a password field and on the right side of the field there was a button labeled "POŘAD" which translated from Czech back to English means "TV SHOW". The designers of the app definitely didn't label their password showing the button "TV SHOW", they labeled it "SHOW". But the translators didn't know that they were translating a button for showing a password. They saw just the string "SHOW" and they were translating the Netflix app, so they guessed. And they guessed wrong.

There are many occurrences of wrong translations like this and the only way how to avoid this is to provide the context to your translators. But taking a screenshot or providing a text description to each label can be annoying.

How does Tolgee help me to have my app perfectly translated?

The operation of providing context has to be easy. Otherwise, developers won't do it. That's why Tolgee enables you to provide a screenshot with a highlighted string to translate with a single click. In the same dialog, where you can modify your localization strings, you can let Tolgee automatically take the screenshot from your App and highlight the string to be translated. This operation takes less than a few seconds. So the developers won't be annoyed by that.

How does it help developers? (The ALT+click magic)

There are various dev Tools for various things. You have React Dev tools, there are Angular dev tools, there are dev tools for state management libraries, etc. Tolgee brings dev tools for localization. When you click a translation string in your app with the ALT key, Tolgee dev tools open and you can translate your string. You never have to edit a .json/.po or other localization data files. The only thing you have to do is ALT + Click the string.

Cool. But how does it work?

In the development mode of the App, the strings are fetched from Tolgee API. If you modify the string or add a new key, the key is saved in the Tolgee Platform. So in development mode, you are working with remote data. That's basically it.

So my App relies on Tolgee Servers?

No! For the production build, you can export the translations from the API and store them as a static asset. So your app doesn't fetch anything from Tolgee API when it's used in the production environment.

So I have to export the string from Tolgee every time I change a string?

No! You can do that automatically in the CI/CD pipeline when your app is built. Or whenever you wish. We are also working on Tolgee CLI, which will help you with tasks like this.

My mama speaks Spanish. Can she translate the strings when my app is deployed?

Yes! She can use (the Tolgee Tools Chrome plugin)[https://chrome.google.com/webstore/detail/tolgee-tools/hacnbapajkkfohnonhbmegojnddagfnj] to enable the dev tools also in deployed App. Then she can translate it directly in the app.

What frameworks are supported?

Tolgee has integrations for React, Angular, Vue, Svelte, Next.js, Gatsby, and others. Learn more here.

How long does it take to integrate?

The integration is very fast! You can do it in seconds. It doesn't take longer than other libraries. There are integration guides in the docs and also in the platform. If you get lost you can just contact us via chat on our website or via our community Slack channel.

Image description

Does it work with SSR?

Yes. There are guides in the docs on how to make it work with popular SSR frameworks.

Can I self-host the platform?

Yes. It's open source and you can self-host the platform. Just follow the docs.

I am using i18next I don't want to migrate

No problem. Tolgee has also SDK for i18next. So you can use it with it. Here are the docs.

Typescript?

The @tolgee/core and all the JS integrations are written in Typescript so the API is typed. You don't have to install @types/.... The types are provided with the npm packages. We also plan to provide type-safety for the translation keys, similar to typesafe-i18n, in the future.

What technologies are used?

For the platform, we use Kotlin/SpringBoot on the backend and Typescript/React on the front end. For the integrations, we use Typescript if we can.

Nice. So what do you want?

It would be nice if you try Tolgee and give us some feedback. Also, we would be pretty happy to get some GitHub stars from you.

Thanks for reading!

Top comments (0)