product icon

Paraglide JS

App

Inlang-ecosystem compatibility badge

Getting started

To auto setup Paraglide JS, run the following command:

npx @inlang/paraglide-js@latest init

This will:

  • Create an inlang project
  • Install necessary dependencies
  • Generate a messages/ folder where your translation files live

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}!"
}

Run the compiler via the CLI to generate the message functions.

npx @inlang/paraglide-js compile --project ./project.inlang --outdir ./src/paraglide

If you are using a Bundler use one of the Bundler Plugins to recompile automatically.

Using messages in code

After running the compiler import the messages with import * as m from "./paraglide/messages". By convention, a wildcard import is used.

import * as m from "./paraglide/messages.js";

m.greeting({ name: "Samuel" }); // Hello Samuel!

Changing the locale

To change the locale, use the setLocale function.

import { setLocale } from "./paraglide/runtime.js";
import * as m from "./paraglide/messages.js";

m.greeting({ name: "Samuel" }); // Hello Samuel!

setLocale("de");

m.greeting({ name: "Samuel" }); // Guten Tag Samuel!

Define your strategy

In the last step, you need to define what strategy you want to use to resolve the locale. Visit the strategy documentation to learn more.