sveltekit-i18n Internationalization for SvelteKit

sveltekit-i18n

Internationalization for SvelteKit

npm install sveltekit-i18n

Read the documentation GitHub

Svelte 5 and Node 22, Bun 1.2 or Deno 2 or newer. ESM only.

Why sveltekit-i18n

  • Built for SvelteKit Per-request instances on the server, so one visitor's language never reaches another visitor's page.
  • One install The core and the Curly parser come with it. Nothing else to add, and only one reactive graph.
  • Loads what a route needs A loader fires when both its locale and its route match, once per freshness window.
  • One reactive instance Svelte 5 runes instead of stores: properties you read, methods you await.
  • Typed keys and payloads A schema slot narrows what t() and l() accept, down to each message's parameters.
  • Extensible The extensions pipe folds further surfaces onto the instance — Svelte stores, for one.

Quick start

  1. Describe the translations your app loads.

    // src/lib/translations/index.js
import { I18n } from 'sveltekit-i18n';

export const config = {
  loaders: [
    {
      locale: 'en',
      key: 'common',
      loader: async () => (await import('./en/common.json')).default,
    },
  ],
};

export const i18n = new I18n(config);

  2. Read them off the instance. The text follows the active locale.

    <script>
  import { i18n } from '$lib/translations';
</script>

<h1>{i18n.t('common.greeting', { name: 'World' })}</h1>

<button onclick={() => { i18n.locale = 'cs'; }}>
  {i18n.t('common.switch')}
</button>

The full getting started guide