Docs / Lit

Lit localization, automated

Localize Lit web components: text in html`` templates becomes t() calls, and an I18nController re-renders components when the language changes.

How it works

Text and ${expressions} in html templates become ${t('key')}, and attributes placeholder=${t('key')}`. Nested templates, styles and comments are left alone.

Before and after

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

src/cart-panel.ts · before

import { LitElement, html } from 'lit';

export class CartPanel extends LitElement {
  name = 'Ada';
  render() {
    return html`<h2>Hi ${this.name}, your basket</h2><input placeholder="Search products" />`;
  }
}

src/cart-panel.ts · after

import { LitElement, html } from 'lit';

export class CartPanel extends LitElement {
  name = 'Ada';
  render() {
    return html`<h2>Hi ${this.name}, your basket</h2><input placeholder="Search products" />`;
  }
}

locales/en.json

{}

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 t(), setLanguage() and I18nController
An I18nController in each component, so it re-renders on a language change

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.