Docs / Qwik

Qwik i18n, automated

Localize a Qwik app: components get useTranslation() reading the language from the URL with Qwik City, and every route gets a copy per language.

How it works

JSX inside component$ gets const { t } = useTranslation(). The language is the URL’s first segment (Qwik City’s useLocation), and each route, dynamic ones included, gets a copy per language.

A sentence around a link stays one message, rendered by rich() with the original elements.

Before and after

The engine’s real output for this file. In a real run, the hosted model names the keys from context.

src/routes/index.tsx · before

import { component$ } from '@builder.io/qwik';

export default component$(() => {
  return (
    <>
      <h1>Welcome to the shop</h1>
      <p>Read the <a href="/faq">FAQ</a> before ordering.</p>
    </>
  );
});

src/routes/index.tsx · after

import { component$ } from '@builder.io/qwik';
import { useTranslation, rich } from '../i18n';

export default component$(() => {
  const { t } = useTranslation();
  return (
    <>
      <h1>{t('home.welcome_to_the_shop')}</h1>
      <p>{rich(t('home.read_the_faq_before_ordering'), { a: (c) => <a href="/faq">{c}</a> })}</p>
    </>
  );
});

locales/en.json

{
  "home": {
    "welcome_to_the_shop": "Welcome to the shop",
    "read_the_faq_before_ordering": "Read the <a>FAQ</a> before ordering."
  }
}

What the setup adds

The first run sets up a generated src/i18n module if the project doesn’t have it yet:

src/i18n.ts with useTranslation(), localizePath() and bundled locales
A copy of each route under src/routes/<lang>/

Run it

The CLI needs Node.js 22 or later.

npm install --save-dev localize-dev
npx localize-dev login

# Preview, then write the changes
npx localize-dev run --dry-run -l es,fr,de
npx localize-dev run -l es,fr,de

# Or open a pull request instead
npx localize-dev pr -l es,fr,de

Or add the GitHub Action and get a pull request on every push. Try it on your own code first in the playground.