// src/i18n.ts
import { setupI18n } from '@deckweiss/internationalization';
import de from '$lib/translations/de.json';
import en from '$lib/translations/en.json';

setupI18n({
    defaultLocale: 'en',
    locales: {
        de,
        en
    },
});

// src/hooks.server.ts
import { handle } from '@deckweiss/internationalization';
import './i18n.js';

export { handle };

// hooks.client.ts
import './i18n.js';

<!-- app.html -->
<html lang="%lang%">
    ...
</html

// +layout.server.ts
export function load(event) {
    return { locale: event.locals.i18n.locale }
}

// +layout.svelte
<script lang="ts">
	import { setI18nContext, useI18n } from '@deckweiss/internationalization';

	let { data, children } = $props();

	setI18nContext(data.locale)
</script>

{@render children()}

Example url: example.com/en/... or example.com/de/...

// src/i18n.ts
import { setupI18n } from '@deckweiss/internationalization';
import de from '$lib/translations/de.json';
import en from '$lib/translations/en.json';

setupI18n({
    defaultLocale: 'en',
    locales: {
        de,
        en
    },
});

// src/hooks.server.ts
import { handle } from '@deckweiss/internationalization';
import './i18n.js';

export { handle };

// hooks.client.ts
import './i18n.js';

<!-- app.html -->
<html lang="%lang%">
    ...
</html

// src/routes/[locale]/+layout.server.ts
export function load(event) {
	event.locals.i18n.setLocale(event.params.locale)
    return { locale: event.locals.i18n.locale }
}

// src/routes/[locale]/+layout.svelte
<script lang="ts">
	import { setI18nContext, useI18n } from '@deckweiss/internationalization';

	let { data, children } = $props();

	setI18nContext(data.locale)
</script>

{@render children()}

3. Usage

// +page.svelte
<script>
    import { useI18n } from '@deckweiss/internationalization';
    
	const i18n = useI18n();
</script>

<p>{i18n.t('app.day', { date: Date.now() })}</p>

The i18n instance is available in all server files, form actions and server hooks (+layout.server.ts, +page.server.ts, +server.ts) via: event.locals.i18n.

4. (optional) Update selected locale

Hint: In cookie-less mode you want to to additionally link from e.g. /de to /en to be consistent across page reloads

// src/lib/components/language-picker.svelte
<script>
    import { useI18n } from '@deckweiss/internationalization';

	const i18n = useI18n()
</script>

<select onchange={(event) => i18n.setLocale(event.target.value)}>
    <option disabled>Choose language</option>
    {#each locales as l}
        <option value={l} selected={l === i18n.locale}>{l}</option>
    {/each}
</select>

JSON Format

This package is compatible with i18next JSON v4. Although, it currently does only support nested keys and interpolation with formatting.

Examples

// src/lib/translations/en.json
{
    "app": {
        "name": "Example app",
        "day": "Today is {{date, date(format: dddd)}}"
    }
}

Usage	Output
$t('app.name')	"Example app"
$t('app.day', { date: new Date(1997, 4, 22) })}	"Today is Thursday"

Date format symbols can be found here. Bundled date languages

German
English
Italian
Spanish

Supported Interpolations

Date and Time

// src/lib/translations/en.json
{
    "day": "Today is {{date, date(format: dddd, dd.mm.yyyy)}}" // Output: "Today is Friday, 23.05.1997"
}

Numbers and Currency

The options argument gets directly passed into the Intl.NumberFormat constructor. Hence, you can configure any option in JSON syntax.

// src/lib/translations/en.json
{
    "number": "{{count, number(options: {\"style\": \"decimal\", \"minimumFractionDigits\": 5})}}", // Output: "5,132.95000"
    "currency": "{{amount, number(options: {\"style\": \"currency\", \"currency\": \"EUR\"})}}" // Output: "5,132.95 €"
}

Known issues

i18n instance is not available in +page.ts and +layout.ts files

Contribution

Create a new release

Update package version either by hand or with pnpm version.
The commit message onto main must begin with chore: release

FAQs

What is @deckweiss/internationalization?

Is @deckweiss/internationalization popular?

Is @deckweiss/internationalization well maintained?

Package last updated on 07 May 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@deckweiss/internationalization

Getting started

Installation

1. Install package

2.a Setup (with cookies)

2.b Setup (cookie-less via URL param)