Paraglide Js
🪂 Paraglide JS
Compiler-based i18n library with tree-shaking, full typesafety, and near zero runtime
Paraglide JS compiles your translations into tree-shakable message functions.
Unused translations are eliminated, and what remains is a fully typesafe API with autocomplete.
Documentation · Quick Start · Report Bug
Used in production by
...and more
Trusted by framework authors
Part of TanStack's CI pipeline
Code Preview
// messages/en.json
{
"greeting": "Hello {name}!"
}
import { m } from "./paraglide/messages.js"
m.greeting({ name: "World" }) // "Hello World!" — fully typesafe
The compiler generates typed message functions. Your bundler tree-shakes unused messages. Expect ~75% smaller bundles (47 KB vs 205 KB) compared to runtime i18n libraries. See benchmarks →
Why Paraglide?
| Tiny Runtime | ~300 bytes. No async loading. No waterfalls. |
| Tree-Shakable | Unused messages are eliminated by your bundler. |
| Fully Typesafe | Autocomplete for message keys and parameters. Typos become compile errors. |
| Framework Agnostic | Works with React, Vue, Svelte, Solid, TanStack, or vanilla JS/TS. |
| Built-in i18n Routing | URL-based locale detection and localized paths out of the box. |
| Inlang Ecosystem | VS Code extension, CLI, translation editor — all work out of the box. |
Works With Your Stack
TanStack Start ·
Quick Start
npx @inlang/paraglide-js init
The CLI sets up everything:
- Creates your message files
- Configures your bundler (Vite, Webpack, etc.)
- Generates typesafe message functions
Then use your messages:
import { m } from "./paraglide/messages.js"
import { setLocale, getLocale } from "./paraglide/runtime.js"
// Use messages (typesafe, with autocomplete)
m.hello_world()
m.greeting({ name: "Ada" })
// Get/set locale
getLocale() // "en"
setLocale("de") // switches to German
How It Works
messages/en.json ──┐
messages/de.json ──┼──→ Compiler ──→ ./paraglide/messages.js
messages/fr.json ──┘ ./paraglide/runtime.js
- You write messages in JSON (or any supported format)
- The compiler generates typed functions
- Your bundler tree-shakes unused messages
- Result: tiny, typesafe, fast
Message Format
Paraglide uses Intl.PluralRules for locale-aware pluralization, supporting all CLDR plural categories (zero, one, two, few, many, other) and ordinals (1st, 2nd, 3rd). Gender and custom selects are supported via the variants system.
// Pluralization example
m.items_in_cart({ count: 1 }) // "1 item in cart"
m.items_in_cart({ count: 5 }) // "5 items in cart"
// Works correctly for complex locales (Russian, Arabic, etc.)
Message format is plugin-based — use the default inlang format, or switch to i18next, JSON, or ICU MessageFormat via plugins.
Pluralization & Variants Docs →
Comparison
| Feature | Paraglide | i18next | react-intl |
|---|---|---|---|
| Runtime size | ~300B | 10kB+ | 8kB+ |
| Tree-shakable | ✅ | ❌ | ❌ |
| Typesafe | ✅ | Partial | ❌ |
| Framework agnostic | ✅ | Wrappers needed | React only |
| i18n routing | ✅ Built-in | ❌ | ❌ |
What Developers Say
"Paraglide JS is by far the best option when it comes to internationalization. Nothing better on the market."
Ancient-Background17 · Reddit
"Just tried Paraglide JS. This is how i18n should be done! Totally new level of DX."
Patrik Engborg · @patrikengborg
"I was messing with various i18n frameworks and must say Paraglide was the smoothest experience. SSG and SSR worked out of the box."
Dalibor Hon · Discord
Talks
Ecosystem
Paraglide is built on the open inlang format. Works with:
| Tool | Description |
|---|---|
| Sherlock | VS Code extension for inline translation editing |
| CLI | Machine translate from the terminal |
| Fink | Translation editor for non-developers |
| Parrot | Manage translations in Figma |
Explore the inlang ecosystem →
Documentation
- Getting Started
- Framework Guides (Next.js, SvelteKit, Astro, etc.)
- Message Syntax & Pluralization
- Routing & SSR
- API Reference
Contributing
We welcome contributions! See CONTRIBUTING.md for guidelines.
License
MIT — see LICENSE
