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
buildscript inpackage.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