product icon

Paraglide JS


Inlang-ecosystem compatibility badge

#Getting started

To use Paraglide standalone without a framework, run the following command:

npx @inlang/paraglide-js@latest init

This will:

  • Install necessary dependencies
  • Generate a messages/ folder where your translation files live
  • Add the Paraglide compiler to your build script in package.json
  • Create necessary configuration files

Running the Paraglide compiler will generate a src/paraglide folder. This folder contains all the code that you will use in your app.

#Adding and Editing Messages

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

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

Make sure to re-run the paraglide compiler after editing your messages.

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.hello() // Hello world!
m.loginHeader({ name: "Samuel" }) // Hello Samuel, please login to continue.


Find examples of how to use Paraglide on CodeSandbox or in our GitHub repository.


Of course, we're not done yet! We plan on adding the following features to Paraglide JS soon: