Internationalization Framework for Global Products

JavaScript library for internationalization (i18n) of JavaScript projects. Supports React (including RSC and React Native), Vue, Node.js, and more.

Get Started Examples

Presented by

Agile localization for tech companies

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

Seamlessly use React components within localized messages, without any restrictions. Creating rich-text messages feels just like writing JSX.

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 has been used and tested by thousands of satisfied developers and has been proven to provide accurate and efficient i18n and l10n results. Join the community.

Fully Fledged

Lingui is a general-purpose framework with bindings for React (including RSC), Vue, 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.

More Features

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>
  )
}