Svelte

A dedicated @localess/svelte package is on the roadmap. Until it ships, integrate Svelte with Localess by combining the framework-agnostic JavaScript client (server-side fetch) with the browser sync script (Visual Editor).

A dedicated @localess/svelte package is on the roadmap. Until it ships, integrate Svelte with Localess by combining the framework-agnostic JavaScript client (server-side fetch) with the browser sync script (Visual Editor).

1. Fetch content

Use @localess/client inside a SvelteKit +page.server.ts so your API token stays out of the browser.

// src/routes/[locale]/+page.server.ts
import { localessClient } from "@localess/client";
import { LOCALESS_ORIGIN, LOCALESS_SPACE_ID, LOCALESS_TOKEN } from "$env/static/private";

const client = localessClient({
  origin: LOCALESS_ORIGIN,
  spaceId: LOCALESS_SPACE_ID,
  token: LOCALESS_TOKEN,
});

export async function load({ params }) {
  const content = await client.getContentBySlug("home", { locale: params.locale });
  return { content };
}

Generate TypeScript types with the CLI so the loaded data is fully typed.

2. Enable the Visual Editor (optional)

Inject the sync script in app.html:

<script
  id="localess-js-sync"
  type="text/javascript"
  async
  src="%sveltekit.assets%/scripts/sync-v1.js"
></script>

Or set it dynamically from your layout using the LOCALESS_ORIGIN env var:

<svelte:head>
  <script
    id="localess-js-sync"
    type="text/javascript"
    async
    src="{origin}/scripts/sync-v1.js"
  ></script>
</svelte:head>

Subscribing to edit events — Svelte 5

<script lang="ts">
  import { onMount } from "svelte";
  import { localessEditable, localessEditableField } from "@localess/client";

  let { data } = $props();
  let pageData = $state(data.content.data);

  onMount(() => {
    if (window.localess) {
      window.localess.on(["input", "change"], (event) => {
        pageData = event.data;
      });
    }
  });
</script>

<section {...localessEditable(pageData)}>
  <h1 {...localessEditableField("title")}>{pageData.title}</h1>
</section>

Subscribing to edit events — Svelte 4

<script lang="ts">
  import { onMount } from "svelte";
  import { localessEditable, localessEditableField } from "@localess/client";

  export let data;
  let pageData = data.content.data;

  onMount(() => {
    if (window.localess) {
      window.localess.on(["input", "change"], (event) => {
        if (event.type === "input" || event.type === "change") {
          pageData = event.data;
        }
      });
    }
  });
</script>

<section {...localessEditable(pageData)}>
  <h1 {...localessEditableField("title")}>{pageData.title}</h1>
</section>

See Visual Editor for the full event list and attribute reference.

Roadmap

@localess/svelte will ship with helpers analogous to @localess/react — a dynamic component renderer, a useLocaless-style store, editable-attribute helpers, and a rich-text renderer. Track progress on GitHub.

1. Fetch content

2. Enable the Visual Editor (optional)

Subscribing to edit events — Svelte 5

Subscribing to edit events — Svelte 4

Roadmap

On this page