Paraglide JS is a build-time i18n library for Vite.

Setup is just one plugin and Vite's tree-shaking eliminates unused messages automatically—leading to up to 70% smaller i18n bundles compared to runtime libraries.

• One plugin setup — no complex configuration, just add paraglideVitePlugin and you're done
• Works with any framework — React, Vue, Svelte, Solid, Preact, Lit, or vanilla JS
• Fully type-safe — IDE autocomplete for message keys and parameters
• i18n routing — SEO-friendly localized URLs with the strategy system

Why Vite + Paraglide?

Vite tree-shakes unused code. Paraglide compiles each message into a separate function. Combined, you get up to 70% smaller i18n bundle sizes than runtime i18n libraries:

// messages/en.json
{ "greeting": "Hello {name}!", "unused": "I'm never used" }

// your app
m.greeting({ name: "World" });
// m.unused();  <-- commented out, not used

// bundle output
function greeting(params) { return `Hello ${params.name}!`; }
- function unused() { return "I'm never used"; }

Unused messages are automatically removed from the bundle. See the benchmark.

Framework specific Vite guides

SvelteKit · Astro · TanStack Start

Getting started

npx @inlang/paraglide-js@latest init

Add the vite plugin to your vite.config.ts:

import { defineConfig } from "vite";
+import { paraglideVitePlugin } from "@inlang/paraglide-js";

export default defineConfig({
  plugins: [
+    paraglideVitePlugin({
+      project: "./project.inlang",
+      outdir: "./src/paraglide",
+    }),
  ],
});

Usage

import { m } from "./paraglide/messages.js";
import { getLocale, setLocale } from "./paraglide/runtime.js";

// Use messages
m.greeting({ name: "World" }); // "Hello World!"

// Get and set locale
getLocale(); // "en"
setLocale("de"); // switches to German

Learn more about messages, parameters, and locale management →

Advanced concepts

• I18n routing — localized URLs and translated pathnames
• Server-side rendering — SSR with request isolation
• Variants — pluralization, gender, and conditional messages