@inlang/paraglide-js

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:

• Pluralization (Join the Discussion)
• Formatting of numbers and dates (Join the Discussion)
• Markup Placeholders (Join the Discussion)
• Component Interpolation
• Per-Language Splitting without Lazy-Loading
• Even Smaller Output

Talks

• Svelte Summit Spring 2023
• Svelte Summit Fall 2023
• Web Zurich December 2023
• Svelte London January 2024