Magic Translate vs. Lingui

Lingui is an open-source i18n library for JavaScript and React. Like Magic Translate, it lets you write your own words in your components instead of keys. The difference is what happens next: with Lingui, you extract the messages, have them translated and compile them for every language. With Magic Translate, the translations are created for you.

At a glance

How the code differs

With Lingui, the text stays in the component, but every message goes through a catalog:

import { Trans } from '@lingui/react/macro';

const Cart = () => (
  <h2>
    <Trans>Your shopping cart</Trans>
  </h2>
);

// Then run `lingui extract`, translate the catalogs for every language,
// run `lingui compile` and load the right catalog when the app starts.

With Magic Translate, the component looks almost the same, and there is nothing else to do:

import { T } from '@magic-translate/react';

const Cart = () => (
  <h2>
    <T>Your shopping cart</T>
  </h2>
);

When to choose Magic Translate

• You like writing your own words in your components, and you don't want to maintain catalogs.
• You don't have translators, or you don't want to wait for them before you release.
• You want new languages without a translation project.

When to choose Lingui

• Every text must be translated or reviewed by a person.
• You need ICU messages for complex plurals and gender.
• You want a free, open-source library with no external service.

Moving from Lingui to Magic Translate

Because both libraries keep the text in the component, moving is mostly a search and replace: <Trans> becomes <T>, and the t macro becomes the useT hook. You can move one component at a time.

Ready to try it? Follow the getting started guide to translate your first component in five minutes.