Translate React apps without touching components

No react-i18next setup, no translation keys, no component rewrites. Add the script tag to your HTML shell and Lingvit uses a MutationObserver to translate all content — including post-hydration updates and lazy-loaded routes.

Get started View all integrations

What gets translated

Initial server-rendered or static HTML

Content after React hydration

useEffect and state-driven updates

React Router client-side navigation

Lazy-loaded components and code-split routes

Portals and modal content

Error boundary fallback text

Metadata via react-helmet or similar

Setup guide

1
Add the script to your HTML shell
In public/index.html (CRA), index.html (Vite), or your equivalent HTML entry point, paste the Lingvit script tag before </body>:
```

<script src="https://cdn.lingvit.com/widget.bundle.js?v=1" async></script>
```
2
The widget observes DOM changes automatically
Lingvit's MutationObserver watches for any DOM updates after hydration. No hook calls, no wrappers, no context providers needed.
3
Connect in the Lingvit dashboard
Create a project at app.lingvit.com, add your app URL, and select your target languages. The widget uses the project key from your script URL.

Need the full platform overview? React app use case guide →

Frequently asked questions

Does it translate content added by useEffect or data fetching?

Yes. The MutationObserver fires on every DOM mutation, so content loaded after the initial render — from API calls, state changes, or effects — is translated as it appears.

Does it work with React Router?

Yes. When React Router navigates to a new route and renders new content, Lingvit detects the DOM changes and translates the new content. No route-level configuration needed.

Will this conflict with my existing i18n setup?

No. Lingvit operates on rendered HTML output, not on string keys or resource bundles. If you already use react-i18next for some languages, Lingvit can add additional languages on top without conflict.

How does it handle frequent React re-renders?

Efficiently. Lingvit batches mutation observations and only re-translates nodes that have actually changed. Frequent re-renders do not trigger redundant translation calls.

Setup guide

Add the script to your HTML shell

In public/index.html (CRA), index.html (Vite), or your equivalent HTML entry point, paste the Lingvit script tag before </body>:

<!-- Add before </body> in your HTML shell -->
<script src="https://cdn.lingvit.com/widget.bundle.js?v=1" async></script>

The widget observes DOM changes automatically

Lingvit's MutationObserver watches for any DOM updates after hydration. No hook calls, no wrappers, no context providers needed.

Connect in the Lingvit dashboard

Create a project at app.lingvit.com, add your app URL, and select your target languages. The widget uses the project key from your script URL.

Frequently asked questions

Does it translate content added by useEffect or data fetching?

Yes. The MutationObserver fires on every DOM mutation, so content loaded after the initial render — from API calls, state changes, or effects — is translated as it appears.

Does it work with React Router?

Yes. When React Router navigates to a new route and renders new content, Lingvit detects the DOM changes and translates the new content. No route-level configuration needed.

Will this conflict with my existing i18n setup?

How does it handle frequent React re-renders?

Efficiently. Lingvit batches mutation observations and only re-translates nodes that have actually changed. Frequent re-renders do not trigger redundant translation calls.

Translate React apps without touching components

What gets translated

Setup guide

Frequently asked questions

Start translating your React site

Translate React apps without touching components

What gets translated

Setup guide

Frequently asked questions

Start translating your React site