Skip to content

Svelte 5 + Vite

Svelte i18n, directly in your components.

Write messages beside your component logic. Palamedes extracts and transforms macros in Svelte scripts before the Svelte compiler runs, then delivers the active language before the component executes.

01 — Authoring

Messages stay in your .svelte files.

<script lang="ts">
import { plural, t } from "@palamedes/core/macro";

const title = t`Choose your tickets`;
let quantity = $state(1);
const label = $derived(plural(quantity, {
  one: "# ticket", other: "# tickets",
}));
</script>

<h1>{title}</h1>
<button onclick={() => quantity++}>{label}</button>

Put palamedes({ framework: "none", mdx: false }) before the official Svelte plugin. Inline JavaScript and TypeScript instance and module scripts support core macros. Import macros in the script block that uses them; module-level calls belong inside functions. The native CLI preserves source locations, and the transform retains source maps.

02 — Working example

The same booking app, in four languages.

The Frontend Stage example shares its data and styles with the other integrations. Development and production browser checks cover English, German, French, and Spanish: reactive plurals, currency totals, cart actions, lazy component catalogs, locale navigation, and delivery failures.

The Vite example runs in the browser. For server rendering and hydration, use the separate SvelteKit integration. Author macros in scripts and render their values in markup. Template-expression macros, Svelte rich text, and catalog HMR are outside the current component contract; the integration reference records the exact scope.