Docs / Static HTML

Translate a static HTML website, automated

Translate a static HTML site: copy gets data-i18n markers, a small i18n.js swaps in each language, and optional translated pages per language with hreflang for SEO.

How it works

The text stays in the page and gets a data-i18n marker; a generated i18n.js swaps in the visitor’s language. Sentences around inline elements stay whole.

Set "htmlPages": true to also write each page translated per language (es/index.html) with hreflang links, so search engines index every language.

Before and after

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

index.html · before

<h1>Send money anywhere</h1>
<p>Transfers arrive in <strong>minutes</strong>, not days.</p>
<input placeholder="Your email address" />

index.html · after

<h1 data-i18n="home.send_money_anywhere">Send money anywhere</h1>
<p data-i18n="home.transfers_arrive_in_minutes_not">Transfers arrive in <strong>minutes</strong>, not days.</p>
<input placeholder="Your email address" data-i18n-placeholder="home.your_email_address" />

locales/en.json

{
  "home": {
    "send_money_anywhere": "Send money anywhere",
    "transfers_arrive_in_minutes_not": "Transfers arrive in <strong>minutes</strong>, not days.",
    "your_email_address": "Your email address"
  }
}

What the setup adds

The first run sets up a generated i18n.js if the project doesn’t have it yet:

i18n.js, linked from every page, with every language bundled for pages opened from disk
An optional <select data-i18n-switcher> language menu

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.