Internationalization

SelfKit use Paraglide to handle Internationalization.

Why paraglide ?

Paraglide simplifies internationalization by seamlessly integrating localization with SvelteKit’s routing and reactivity. It offers dynamic language switching, localized routing, ensuring a smooth multilingual user experience and maintainable codebase.

It is extremely lightweight and does not depend on any cloud or external services.

Setup

No specific setup is required. Paraglide automatically detects the browser's language and displays the appropriate one. If the selected language is unavailable, it defaults to English.

Add language

By default, SelfKit comes with two languages: English and French. All translations are stored in messages/[language-tag].json and follow this structure:

// messages/en.json
{
	// The $schema key is automatically ignored
	"$schema": "https://inlang.com/schema/inlang-message-format",
	"hello_world": "Hello world!",
	"dark_salty_newt_talk": "Contact Us",
}
svelte

To add a new language, simply create a new file (e.g., de.json) with the same keys as the other languages.

Using translations in Code

All translations are generated in src/lib/paraglide/messages.js. You juste have to use wildwcard import like this:

<script>
	import * as m from '$lib/paraglide/messages.js'
</script>

<p>{m.dark_salty_newt_talk()}</p>
svelte
NOTE

You might wonder why we use names like dark_salty_newt_talk instead of something like contact_us_message. It's simply a good naming practice. You can find more information here .

Tools

VSCode extension

Paraglide provide a VSCode extension to easily handle translations. We highly recommand to install it for smooth devlopment experience.

Sherlock - VS Code extension

Limitations

Here are some limitations to keep in mind:

  • If you're using Vercel, modifications are required to ensure proper functionality ( more informations ).
  • Variants, such as pluralization or gender-specific terms, are not supported ( more informations ).
  • Translations only work within your codebase, so database-stored messages are not translated. We recommend creating alternative database tables to handle translations in such cases.

Links

Last update at: 14/01/2025