Internationalization Framework for Global Products
Lingui is a lightweight, open-source internationalization (i18n) library for JavaScript and TypeScript. It brings compile-time macros and a CLI for message extraction to React, React Native, Vue, SolidJS, Astro, Svelte, and Node.js.
Why choose Lingui for your localization projects?
Universal
Use it everywhere. @lingui/core provides the essential intl functionality which works in any JavaScript project, while @lingui/react offers components for leveraging React rendering, including React Server Components (RSC) support.
Powerful Tooling
Manage your intl workflow with the Lingui CLI, Vite plugin, and ESLint plugin.
The CLI extracts, compiles and validates messages, while the Vite plugin compiles catalogs on the fly, and the ESLint plugin helps catch common usage errors.
Full Rich-Text Support
Use React components within localized messages without any restrictions. Creating rich-text messages feels just like writing JSX.
This keeps message catalogs in sync with the source code, preventing obsolete messages and lowering translation costs.
Headache-Free Localization
Candidate knows 1 language, but Candidate knows 10 languages.
No need to know how many plurals the language has. Create a product in one language and deliver a perfect translation to users.
Built for AI-Assisted Workflows
For AI to do great translations for you, context is critical. Translating UI copy is difficult because it's usually a list of short strings without enough context. Lingui's localization formats allow developers to write descriptions of where and how their keys are used.
Install lingui/skills to help your AI assistant understand Lingui patterns and apply them consistently across your project.
Battle-Proven & Future-Proof
Over the past few years, we have seen a lot of localization projects and developed a tool to handle them all.
If your team needs to edit source texts without developer involvement, or you want the ability to deliver the most recent translations directly to your customers - we've got you covered.
Suitable for All Localization Platforms
Integrate Lingui with your existing workflow. It supports both explicit and auto-generated message keys.
Translations are stored in a standard PO file, which is supported by almost all translation tools. You can also use JSON, CSV, or create your own formatter.
Verified by Thousands of Developers
Lingui is used and tested by thousands of developers in production, with more than 6 million npm downloads a month. Join the community.
Fully Fledged
Lingui is a general-purpose framework with bindings for React (including RSC and React Native), Vue, SolidJS, Astro, and Svelte. It can be used on a server with Node.js or in Vanilla JavaScript.
Extend its capabilities with optional modules offering features such as lazy loading of language packs, automatic user locale detection, and more.
Workflow
Define Messages
Write messages directly in your codebase using Lingui's components.
<p>
<Trans>Hello {name}!</Trans>
</p>
Define Messages
Write messages directly in your codebase using Lingui's components.
<p>
<Trans>Hello {name}!</Trans>
</p>
Extract
Use the Lingui CLI to extract all translation keys from your codebase and create or update message catalogs.
#: src/App.tsx:24
msgid "Hello {name}!"
msgstr "Hello {name}!"
#: src/App.tsx:24
msgid "Hello {name}!"
msgstr "Hello {name}!"
Extract
Use the Lingui CLI to extract all translation keys from your codebase and create or update message catalogs.
Translate
Translate your message catalogs either manually or through integration with translation tools.
#: src/App.tsx:24
msgid "Hello {name}!"
msgstr "Ahoj {name}!"
Translate
Translate your message catalogs either manually or through integration with translation tools.
#: src/App.tsx:24
msgid "Hello {name}!"
msgstr "Ahoj {name}!"
Compile
Use the Lingui CLI to compile your message catalogs into a format that can be used in your application.
module.exports = {
messages: JSON.parse("...")
};
module.exports = {
messages: JSON.parse("...")
};
Compile
Use the Lingui CLI to compile your message catalogs into a format that can be used in your application.
Deploy
Include the compiled message catalogs in your production build.
Deploy
Include the compiled message catalogs in your production build.
Integrating Lingui into your project is easy!
import { Trans } from "@lingui/react/macro"
function App() {
return (
<Trans
comment="Docs link on the website"
>
Read the <a href="https://lingui.dev">documentation</a>
for more info.
</Trans>
)
}
Trans component to wrap translatable content.Loved by hundreds of teams worldwide
And many more...
Frequently asked questions
Does Lingui work with the Next.js App Router and React Server Components?
Yes. @lingui/react supports React Server Components with both the SWC and the Babel setup of Next.js. See the React Server Components tutorial for an App Router walkthrough and the Next.js example, which covers both routers.
How do I translate strings outside a React component, for example in constants or validation schemas?
Tag the string with the msg macro to get a message descriptor you can define at module level and translate where it is rendered with i18n.t() or _ from useLingui. The same pattern picks a message by a runtime value. See Lazy Translations and the macro usage notes.
Why do translations work in development but show message IDs in production?
Development keeps the source messages and the message compiler in the bundle; production strips both and relies on compiled catalogs, so anything not extracted before the build renders as its ID. Run lingui extract and lingui compile before building. @lingui/vite-plugin, @lingui/loader and @lingui/metro-transformer can take over the compile step, but extraction still has to run. Details in Keeping Your Bundle Small.
Can I use Lingui without React, for example in Node.js, Vue or Svelte?
Yes. @lingui/core is framework-agnostic and works in the browser, on a Node.js server or in a script, and the core macros work in any JavaScript code. Vue files are handled by @lingui/extractor-vue; Svelte and Astro use community packages. Start with the JavaScript tutorial or the Vue extractor.
How do I load only the active language's catalog instead of bundling every locale?
Compiled catalogs are ordinary modules: dynamically import() the one for the requested locale, then call i18n.load() and i18n.activate(). Bundlers emit one chunk per language and fetch only the active one. Load the source locale too, since production builds drop the default messages. See Dynamic Loading of Message Catalogs.
Does Lingui work with React Native and Expo?
Yes. React Native uses the same packages and extract-and-compile workflow as the web, and the optional @lingui/metro-transformer compiles .po files on the fly. Give I18nProvider a default component that renders Text, and polyfill Intl.Locale and Intl.PluralRules if your engine lacks them. See the React Native tutorial and the Expo example.
Ready to localize your app?
Start with the docs, automate message extraction, and deliver translations with tools that fit your existing stack.
