Docs / Svelte and SvelteKit

Svelte and SvelteKit i18n, automated

Localize Svelte and SvelteKit apps with svelte-i18n: markup becomes $_() calls, plurals become ICU messages, and SvelteKit pages render in the visitor’s language on the server.

How it works

Markup becomes {$_('key')}, attributes like title="Hello {name}" become one message, and toasts in <script> are translated too.

A sentence around a link or bold text stays one message: a generated <I18nT> renders it, with each element passed as a snippet (Svelte 5) or picked in its slot (Svelte 3 and 4), so translators can move the link to fit the grammar.

In SvelteKit, a generated hooks.server picks the language from a cookie or Accept-Language, so pages render in the right language with no flash.

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/cart/+page.svelte · before

<script>
  export let data;
</script>

<h1>Your cart</h1>
<p>You have {data.count} items ready to ship.</p>
<p>Read our <a href="/returns">returns policy</a> before you order.</p>
<img src="/box.png" alt="Box for {data.name}" />

src/routes/cart/+page.svelte · after

<script>
  import { _ } from 'svelte-i18n';
  import I18nT from '$lib/I18nT.svelte';
  export let data;
</script>

<h1>{$_('page.your_cart')}</h1>
<p>{$_('page.you_have_items_ready_to', { values: { count: data.count } })}</p>
<p><I18nT key="page.read_our_before_you_order">{#snippet a()}<a href="/returns">{$_('page.returns_policy')}</a>{/snippet}</I18nT></p>
<img src="/box.png" alt={$_('page.box_for', { values: { name: data.name } })} />

locales/en.json

{
  "page": {
    "your_cart": "Your cart",
    "you_have_items_ready_to": "You have {count} items ready to ship.",
    "returns_policy": "returns policy",
    "read_our_before_you_order": "Read our {a} before you order.",
    "box_for": "Box for {name}"
  }
}

What the setup adds

The first run sets up svelte-i18n if the project doesn’t have it yet:

svelte-i18n
src/lib/i18n (or src/i18n), imported from +layout or main
hooks.server for SvelteKit

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.