Docs / Solid

SolidJS i18n, automated

Localize a SolidJS app: JSX gets useTranslation() from a generated i18next module whose language is a signal, so text updates in place when the language changes.

How it works

JSX is rewritten like React’s, with useTranslation() coming from a generated module. Its t() reads a language signal, so JSX updates when setLanguage() is called.

A sentence around a link stays one message (Read the <a>terms</a> first), 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/components/Cart.tsx · before

export function Cart(props) {
  return (
    <section>
      <h2>Hi {props.name}, your cart</h2>
      <p>Read the <a href="/terms">terms</a> before paying.</p>
      <button title="Pay now">Checkout</button>
    </section>
  );
}

src/components/Cart.tsx · after

import { useTranslation, rich } from '../i18n';

export function Cart(props) {
  const { t } = useTranslation();
  return (
    <section>
      <h2>{t('cart.hi_your_cart', { name: props.name })}</h2>
      <p>{rich(t('cart.read_the_terms_before_paying'), { a: (c) => <a href="/terms">{c}</a> })}</p>
      <button title={t('cart.pay_now')}>{t('cart.checkout')}</button>
    </section>
  );
}

locales/en.json

{
  "cart": {
    "hi_your_cart": "Hi {{name}}, your cart",
    "read_the_terms_before_paying": "Read the <a>terms</a> before paying.",
    "pay_now": "Pay now",
    "checkout": "Checkout"
  }
}

What the setup adds

The first run sets up i18next if the project doesn’t have it yet:

i18next
src/i18n.ts with useTranslation() and setLanguage()

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.