@inlang/paraglide-js weekly downloads statistics

<h1 align="center">🪂 Paraglide JS</h1> <p align="center"> <strong>Compiler-first i18n for React, TanStack Start, SvelteKit, and any Vite app.</strong> <br/> Type-safe message functions, tree-shakable translations, and first-class SSR. </p> <p align="center"> <a href="https://paraglidejs.com"><strong>Documentation</strong></a> · <a href="#quick-start"><strong>Quick Start</strong></a> · <a href="https://github.com/opral/inlang-paraglide-js/issues"><strong>Report Bug</strong></a> </p> <p align="center"> _{Used in production by}<br/><br/> <a href="https://www.kraftheinz.com/"><img src="https://github.com/opral/paraglide-js/blob/main/assets/used-by/kraft-heinz.png?raw=true" alt="Kraft Heinz" height="18"></a>&nbsp;&nbsp;&nbsp; <a href="https://www.bose.com/"><img src="https://github.com/opral/paraglide-js/blob/main/assets/used-by/bose.svg?raw=true" alt="Bose" height="18"></a>&nbsp;&nbsp;&nbsp; <a href="https://www.disney.co.jp/"><img src="https://github.com/opral/paraglide-js/blob/main/assets/used-by/disney.svg?raw=true" alt="Disney" height="18"></a>&nbsp;&nbsp;&nbsp; <a href="https://ethz.ch/de.html"><img src="https://github.com/opral/paraglide-js/blob/main/assets/used-by/eth-zurich.svg?raw=true" alt="ETH Zurich" height="18"></a>&nbsp;&nbsp;&nbsp; <a href="https://brave.com/"><img src="https://github.com/opral/paraglide-js/blob/main/assets/used-by/brave.svg?raw=true" alt="Brave" height="18"></a>&nbsp;&nbsp;&nbsp; <a href="https://www.michelin.com/"><img src="https://github.com/opral/paraglide-js/blob/main/assets/used-by/michelin.svg?raw=true" alt="Michelin" height="18"></a>&nbsp;&nbsp;&nbsp; <a href="https://www.idealista.com/"><img src="https://github.com/opral/paraglide-js/blob/main/assets/used-by/idealista.svg?raw=true" alt="idealista" height="18"></a>&nbsp;&nbsp;&nbsp; <a href="https://www.architonic.com/"><img src="https://github.com/opral/paraglide-js/blob/main/assets/used-by/architonic.png?raw=true" alt="Architonic" height="18"></a>&nbsp;&nbsp;&nbsp; <a href="https://lovable.dev/"><img src="https://github.com/opral/paraglide-js/blob/main/assets/used-by/lovable.svg?raw=true" alt="Lovable" height="18"></a>&nbsp;&nbsp;&nbsp; <a href="https://www.klaviyo.com/"><img src="https://github.com/opral/paraglide-js/blob/main/assets/used-by/klaviyo.svg?raw=true" alt="Klaviyo" height="18"></a>&nbsp;&nbsp;&nbsp; <a href="https://reland.com.br/"><img src="https://github.com/opral/paraglide-js/blob/main/assets/used-by/reland.svg?raw=true" alt="Reland" height="18"></a> </p> <p align="center"> _{Framework-authored and framework-tested}<br/><br/> <a href="https://svelte.dev/docs/cli/paraglide"><img src="https://cdn.simpleicons.org/svelte/FF3E00" alt="Svelte" height="14" /> SvelteKit's official i18n integration</a><br/> <a href="https://paraglidejs.com/blog/tanstack-ci"><img src="https://tanstack.com/images/logos/logo-color-100.png" alt="TanStack" height="14" /> TanStack Router's e2e-tested i18n example</a> </p>

Code Preview

// messages/en.json
{
  "greeting": "Hello {name}!"
}

// The examples use React. The same m.* API works in SvelteKit, TanStack
// Start, React Router, Vue, Solid, Astro, and vanilla JS/TS — only the
// surrounding component code changes.
import { m } from "./paraglide/messages.js";
import { locales, setLocale } from "./paraglide/runtime.js";

export function Greeting() {
  return (
    <>
      <h1>{m.greeting({ name: "World" })}</h1> {/* fully typesafe */}
      {locales.map((locale) => (
        <button key={locale} onClick={() => setLocale(locale)}>
          {locale}
        </button>
      ))}
    </>
  );
}

The compiler turns your messages into typed ESM functions. Vite, Rollup, and other modern bundlers can tree-shake unused translations before they reach the browser. Expect up to 70% smaller i18n bundle sizes compared to runtime i18n libraries (e.g. 47 KB vs 205 KB for 5 locales and 200 messages — methodology).

Why Paraglide?…