The React i18n library that syncs its own keys

The React i18n library that syncs its own keys

Open-source localization library and platform for React

Open-source localization library and platform for React

Keys sync to Tolgee as you write them. Translations come back from AI or from your translators. A T component, a useTranslate hook, ICU plurals and TypeScript types. And once it is wired, texts stop being your tickets.

Keys sync to Tolgee as you write them. Translations come back from AI or from your translators. A T component, a useTranslate hook, ICU plurals and TypeScript types. And once it is wired, texts stop being your tickets.

No card required.
30,000 hosted words and 3 seats
on the free plan.

// src/App.jsx

<h1>Sign up</h1>

Tolgee project

app_title

cta_button

// src/App.jsx

<h1><T keyName="signup_title" /></h1>

Tolgee project

app_title

cta_button

signup_title

Sign up

Registrieren

Regístrate

Trusted by great companies. Used by 40 000+ users.

Up and running in three lines

Install the SDK, wrap a string, run the app. New keys show up in your Tolgee project on their own.

> npm install @tolgee/react

What you get as a developer

T component and useTranslate hook

Use the component in JSX or the hook anywhere you need a string. Both are typed.

ICU plurals and placeholders

Plurals, gender, numbers and dates through ICU message format. HTML in translations is handled safely.

SSR ready

Translations render on the server, no flash of untranslated text. On Next.js? There is a dedicated page for that.

Works with i18next

Already on react-i18next? Tolgee plugs into it. Keep your setup and move over gradually.

CLI and CI

Push and pull translations, tag keys and extract strings from code in your pipeline.

REST API and standard formats

Import and export JSON, .po, XLIFF and more. Your data is never locked in.

Alt+click any text in your running app and edit it

QuickFit app

Workouts that fit your schedule, goals, and lifestyle.

Workouts that fit your schedule, goals, and lifestyle.

Quick translation

Homepage-subtitle

Workouts that fit your schedule, goals...

Entrenamientos que se adaptan a tu…

Alt+click any text in your running app and edit it

Hold Alt, click any text in the running app, type. That is the whole editing flow.

Hold Alt, click any text in the running app, type. That is the whole editing flow.

Your PM, your client or your translator can do it. They edit in the app, not in a spreadsheet.

Your PM, your client or your translator can do it. They edit in the app, not in a spreadsheet.

The edit is data in Tolgee, not a change in your code. Nothing ships until you decide.

The edit is data in Tolgee, not a change in your code. Nothing ships until you decide.

Nico H.

Project Leader

I really like the in-context editing feature of Tolgee. This way our clients have an easy to use way to edit translations of the platforms we build.

Nico H.

Developer

I really like the in-context editing feature of Tolgee. This way our clients have an easy to use way to edit translations of the platforms we build.

AI translations that know where the string sits

AI translations that know where the string sits

The React SDK captures the context of each text in your UI.

The React SDK captures the context of each text in your UI.

The AI translator uses it, so "Save" on a button and "Save" in a bank app do not get the same translation. New languages are ready in minutes.

The AI translator uses it, so "Save" on a button and "Save" in a bank app do not get the same translation. New languages are ready in minutes.

My app

Learn more

Start now

Quick translation

Button_key_name

Start now

My app

Learn more

Start now

Open source, self-hostable, no lock-in

Apache-2.0 licence, 4 000+ stars on GitHub. Run it on our cloud or on your own servers. Import and export any time.

Drew Hoover

Product Developer at Curipod

We were seeing hundreds of React crashes per day from browser translation. Tolgee brought that number to zero overnight.

FAQ

How do I add new keys?

You can add new keys in the Tolgee Platform using the Native SDKs, CLI, or REST API. For JavaScript frameworks like React, Angular, Vue, etc, we recommend adding keys using in-context editing, which is part of the Native SDKs.

How can I handle plurals?

We recommend using the ICU message format for pluralization. It enables you to render the correct plural forms in every known language.


E.g.

{dogsCount, plural,
  one {Je tu jeden pes}
  few {Jsou tu # psi}
  other {Je tu # psů}}


The `few` variant in the example above is not required in English. However, in the Czech language, providing this form is necessary to display a grammatically correct string for any number.

ICU message format handles this for you.

Tolgee Platform visualizes plurals so users, like translators, do not have to face the ICU syntax.

Tolgee Platform can export visualized plurals to various file formats supporting pluralization, like .po, Ruby .yaml or i18next.

Which machine translation providers are supported?

Tolgee currently supports

How can product managers, designers or other non-developer team members edit the strings?

Team members who care about precise wording can reliably edit the strings directly inside the product using Tolgee Native SDKs and its in-context editing feature.

Users can open the in-context edition dialog by alt+clicing the string in the development mode app.

Even live production applications can be turned to development mode using the Tolgee Chrome plugin.

Such an edit is very simple and reliable because the user knows what string is edited and that they're not editing a different string. Also, they don't have to search for the string in the source code, localization files, or huge localization data sets.

Is my application dependent on Tolgee Servers?

No. In a production environment, you should not use Tolgee as a source for localization data or leak your API key this way.

Instead, you should use data exported as static assets or Content Delivery (CDN).

How can I export the data for production?

You can export the data

Is my API key exposed in the production?

When your app is live in production, there is no need to use the API key. Your app does not fetch data from Tolgee REST API; instead, it fetches data from static assets or Content Delivery (CDN).

You should never leak your API key. That's why developers should store the API keys in environment files (.env) in the .gitignore file.

What formats are supported by Tolgee?

Tolgee supports all significant formats storing localization data such as JSON, XLIFF, .strings, .arb, .po and many more. Read about all supported formats here.

What's the difference between development and production mode?

When running your app in development mode with the Tolgee Native SDKs, localization data are fetched from the Tolgee REST API. You can edit the strings using the in-context tools, generate screenshots or review translations.

On the other hand, in production mode, Tolgee uses static assets or data published to Content Delivery (CDN). In production mode, no one can modify the app's strings unless they provide their API key using the Tolgee Chrome plugin.

Can I use strings created for web app for mobile and other apps?

Yes. When conversion to Tolgee ICU placeholders is enabled, you can reuse the exact data for any supported platform.

For example, you can use data created for web applications for your iOS or Android mobile app and vice versa.

How can I automate exporting data from the Tolgee Platform?

You can use your favorite CI/CD tool, such as GitHub Actions or GitLab CI/CD, while embracing Tolgee CLI's pull command or Tolgee REST API's export endpoint to automate data exporting.

Do you offer a completely free cloud plan?

Absolutely! When you sign up for Tolgee, you will automatically receive our Free plan, which is limited by the number of hosted words, seats and MT credits.

Try it on your next React project

Not sure it fits your setup? Write to info@tolgee.io or book a call.

Marketa Cizmar

Co-founder & COO