Content

Fetching content

@localess/svelte doesn't have a getContentBySlug-style API bound to its own context, but it re-exports the underlying localessClient factory — always import it from @localess/svelte, never from @localess/client directly. Choose a secret or public token depending on where the fetch runs.

SSR with SvelteKit

Fetch in a +page.server.ts load() function, using a secret token — SvelteKit guarantees .server.ts files never reach the client bundle:

// src/routes/[...slug]/+page.server.ts
import { localessClient } from '@localess/svelte';
import { LOCALESS_ORIGIN, LOCALESS_SPACE_ID, LOCALESS_TOKEN } from '$env/static/private';
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async ({ params }) => {
  const client = localessClient({
    origin: LOCALESS_ORIGIN,
    spaceId: LOCALESS_SPACE_ID,
    token: LOCALESS_TOKEN, // secret, server-only
  });
  return { content: await client.getContentBySlug(params.slug || 'home') };
};

SvelteKit's own data-prop serialization hydrates the server-fetched result to the client — @localess/svelte needs no hydration mechanism of its own. Pass the result straight to <LocalessDocument> (see Rendering content below).

getLocaless()

Returns the client registered by localessInit() from Svelte context. Use this for a client-side fetch (e.g. inside an event handler or an $effect) with a public token:

<script lang="ts">
  import { getLocaless } from '@localess/svelte';

  const content = await getLocaless().getContentBySlug('home');
</script>

Throws an error if called outside a component tree where localessInit() ran.

Rendering content

LocalessComponent

Dynamically renders a Localess content block by looking up its _schema in the component registry configured via localessInit. Always applies localessEditable(data)'s attributes to the rendered component's root.

<script lang="ts">
  import { LocalessComponent } from '@localess/svelte';

  let { data, assets, links, references }: { data: { title?: string; body?: any[] }; assets?: any; links?: any; references?: any } =
    $props();
</script>

<main>
  <h1>{data.title}</h1>
  {#each data.body ?? [] as item (item._id)}
    <LocalessComponent data={item} {assets} {links} {references} />
  {/each}
</main>

Props

Falls back to fallbackComponent (configured in localessInit) when the schema key is unregistered, or renders an inline error message as a last resort.

The component map passed to localessInit() is the only way to configure the registry — there's no API for mutating it afterwards. To vary the registry by route or environment, branch when you build that map.