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.