Langsys with SvelteKit

The pattern is the same everywhere: the server fetches the catalog once (write key stays server-side), and the client initializes langsys-js-svelte from that seed with a read-only key — no duplicate fetch. The translating itself happens in the browser: the HTML the server sends is in the base language, which is also what search engines index, and the page switches to the visitor's language as it loads.

1 · Load the catalog in +layout.server.ts

The server load function fetches the catalog once per page render; SvelteKit serializes it into the page data. The write key stays on the server; the client gets a read-only key. Both halves see the same catalog — the client just skips the initial fetch.

// src/routes/+layout.server.ts
import { LANGSYS_API_KEY, LANGSYS_PROJECT_ID } from '$env/static/private';

export const load = async ({ fetch }) => {
  const locale = 'en-US'; // from cookie / Accept-Language
  const res = await fetch(
    `https://api.langsys.dev/api/projects/${LANGSYS_PROJECT_ID}/translations?locale=${locale}`,
    { headers: { 'x-Authorization': LANGSYS_API_KEY } }
  );
  const { data: translations } = await res.json();
  return { locale, translations };
};

2 · Initialize in +layout.svelte

A standard Svelte writable is the locale store — the Svelte binding adapts it for the SDK. Init runs in onMount with the seeded catalog, so nothing is fetched twice. The text switches from the base language to the visitor's language once onMount runs.

<!-- src/routes/+layout.svelte -->
<script>
  import { onMount } from 'svelte';
  import { writable } from 'svelte/store';
  import { LangsysApp } from 'langsys-js-svelte';
  import { PUBLIC_LANGSYS_API_KEY, PUBLIC_LANGSYS_PROJECT_ID } from '$env/static/public';

  export let data;

  const locale = writable(data.locale);

  onMount(() => {
    LangsysApp.init({
      projectid: PUBLIC_LANGSYS_PROJECT_ID,
      key: PUBLIC_LANGSYS_API_KEY, // read-only
      UserLocaleStore: locale,
      initialTranslations: data.translations,
      initialTranslationsLocale: data.locale,
      ssrTokenStrategy: 'client',
    });
  });
</script>

<slot />

3 · Use it anywhere below

From here it is the plain Svelte SDK: $t in any component (the signals natively satisfy Svelte's store contract), and $locale = 'fr-FR' switches languages app-wide.

<script>
  import { t } from 'langsys-js-svelte';
</script>

<h1>{$t('Welcome to our store', 'Home')}</h1>