Sveltekit with typesafe-i18n

A minimal setup demonstrating how to use typesafe-i18n for fully type-safe internationalization in Svelte 5 + SvelteKit, including locale loading, strongly typed translations, and seamless integration with the new runes-based Svelte API.

demo : sveltekit-typesafe-i18n.pages.dev

Technical Rationale

• Based on the code in file index.mts, typesafe-i18n integration leverages svelte/store (Svelte’s built-in state management), allowing the use of native state mechanisms without adding complexity.
• According to the Svelte 5 Migration Guide, there are no significant changes to state management (svelte/store), ensuring that the i18n code remains compatible with Svelte 5.
• Although typesafe-i18n has not received updates for two years, it remains stable, type-safe, and fully compatible with the latest versions of Svelte, as evidenced by the open issues in the repository that show no critical bugs or compatibility problems.

Install typesafe-i18n

npm install typesafe-i18n

Optional configuration (recommended)

Open file .typesafe-i18n.json and add this line

   "outputPath": "./src/lib/i18n",

That line will automatically call $lib in Sveltekit.

Check code file +layout.ts [^1] and hooks.server.ts [^2].

[^1]: Reference implementation typesafe-i18n: typesafe-i18n-demo-svelte [^2]: Reference implementation change attr lang in tag html: hooks.server.ts

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

bun run dev #in bun

npm run dev

start typesafe-i18n

bun run typesafe-i18n #in bun

npm run typesafe-i18n

Building

To create a production version of your app:

bun run build #in bun

npm run build