Basics

Adding and removing locales

To add a new locale, add it to the locales array in <project0name>.inlang/settings.json file.

// project.inlang/settings.json

{
  "baseLocale": "en",
+ "locales": ["en", "de"]
}

Adding and editing messages

Messages are stored in messages/{locale}.json as key-value pairs. You can add parameters with curly braces.

// messages/en.json
{
+ 	"greeting": "Hello {name}!"
}

Importing messages

After compiling your project, you'll have access to all your messages through the generated messages.js file:

// Import all messages at once
import { m } from "./paraglide/messages.js";

// Use a message
console.log(m.hello_world()); // "Hello World!"

Using parameters

For messages with parameters, simply pass an object with the parameter values:

// messages/en.json
// { "greeting": "Hello {name}!" }

import { m } from "./paraglide/messages.js";

// Pass parameters as an object
console.log(m.greeting({ name: "Samuel" })); // "Hello Samuel!"

Forcing a locale

You can override the locale by passing a locale option as the second parameter:

import { m } from "./paraglide/messages.js";

// Force the message to be in German
console.log(m.greeting({ name: "Samuel" }, { locale: "de" })); // "Hallo Samuel!"

Setting the locale

To change the current locale, use the setLocale function:

import { setLocale } from "./paraglide/runtime.js";

// Change locale to German
setLocale("de");

Getting the current locale

To get the current locale, use the getLocale function:

import { getLocale } from "./paraglide/runtime.js";

console.log(getLocale()); // "de"

Routing

The localizeHref function can be used to generate URLs with the current locale:

import { localizeHref } from "./paraglide/runtime.js";

console.log(localizeHref("/blog")); // "/blog"
console.log(localizeHref("/blog", { locale: "de" })); // "/de/blog"

<a href={localizeHref("/blog")}>Blog</a>
<a href={localizeHref("/blog", { locale: "de" })}>Blog (de)</a>

Choosing your strategy

You likely want to use one of the strategies provided by Inlang. Visit the strategy documentation to learn more.

Advanced usage

• Choosing your strategy
• Server-side rendering
• Multi-tenancy