Getting Started

Get started instantly with the Paraglide-SvelteKit CLI.

npx @inlang/paraglide-sveltekit init
npm install

The CLI will ask you which languages you want to support. This can be changed later.

• Create an Inlang Project
• Create translation files for each of your languages
• Add necessary Provider Components and files
• Update your vite.config.js file to use the Paraglide-SvelteKit Plugin.

You can now start your development server and visit /de, /ar, or whatever languages you've set up.

Creating Messages

Your messages live in messages/{languageTag}.json files. You can add messages in these files as key-value pairs of the message ID and the translations.

Use curly braces to add parameters.

// messages/en.json
{
	// The $schema key is automatically ignored
	"$schema": "https://inlang.com/schema/inlang-message-format",

	"hello_world": "Hello World!",
	"greetings": "Greetings {name}."
}

Learn more about the format in the Inlang Message Format Documentation.

Note: All messages you use in your project must be added to these files. It is not possible to dynamically add more messages at runtime.

Using messages in Code

The Paraglide compiler will generate a src/lib/paraglide/messages.js file that contains your messages. Import messages from there. By convention, a wildcard import is used.

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

<h1>{m.homepage_title()}</h1>
<p>{m.homepage_subtitle({ some: "param" })}</p>

Only messages used on the current page are sent to the client. Any messages that aren't used on the current page will be tree-shaken out.

Accessing Language in Code

You can access the current language with the languageTag() function.

<script>
	import { languageTag } from '$lib/paraglide/runtime.js'
</script>

<h1>{languageTag()}</h1>

On the server languageTag() is scoped to the current request, there is no danger of multiple requests interfering. languageTag() can safely be called in server-load functions and form actions.

Language detection

The language is determined based on the URL. If the first segment of the URL is a language tag, that language will be used. If no language tag is present, the default language will be used.

• /about - English
• /de/about - German

The reroute hook in src/hooks.js (added automatically) automatically rewrites requests that include the language in the URL to the correct page. There is no need to modify your routes to add a [locale] segment.

src/
  routes/
	+layout.svelte
	+page.svelte