product icon

Paraglide JS

App

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": "https://inlang.com/schema/inlang-message-format",
+ 	"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.

#Playground

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

#Roadmap

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

#Talks