Reference

Assets

@localess/svelte doesn't export a standalone asset-resolving helper (unlike @localess/react's resolveAsset or @localess/angular's llAsset pipe). Use the client's own assetLink() method, which builds a fully qualified URL from the configured origin and spaceId — never construct asset URLs by hand:

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

  import type { HeroSection } from '../.localess/localess';

  let { data }: LocalessSchemaProps<HeroSection> = $props();
  const client = getLocaless();
</script>

<img src={client.assetLink(data.image)} alt={data.imageAlt} />

<!-- With transform parameters -->
<img src={client.assetLink(data.image, { w: 800, h: 600, q: 70, f: 'webp' })} alt="" />

ContentAsset isn't re-exported from @localess/svelte — import it from @localess/client if you need the type by name, alongside findLink (see Links below).

See Image Transforms for the query-string parameters the endpoint accepts (w, h, q, f, download, thumbnail).

Rich Text

<LocalessRichText />

Renders a Tiptap JSON rich-text field. The markup is derived with $derived, so it updates on its own when the field changes under Visual Editor live sync:

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

  let { data }: LocalessSchemaProps<Article> = $props();
</script>

<LocalessRichText content={data.body} />

Supported elements: doc, paragraph, heading (levels 1–6), bulletList, orderedList, listItem, codeBlock, text; marks bold, italic, strike, underline, code, link. An unknown node is skipped and an unknown mark renders its children unwrapped, each with a one-time console.warn outside production.

Rendering is shared across every Localess SDK by @localess/richtext, so one document renders identically in Svelte, React, Angular, Vue, and Astro.

Links

@localess/svelte doesn't re-export findLink yet — import it directly from @localess/client, which works fine in a Svelte <script> block (it's a pure function, no client instance needed):

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

  let { data, links }: { data: { label: string; link: any }; links: any } = $props();
</script>

<a href={findLink(links, data.link)}>{data.label}</a>

Error handling

getContentBySlug/getContentById throw LocalessApiError on a non-2xx API response — check error.status to distinguish a missing slug (404) from other failures:

import { LocalessApiError, localessClient } from '@localess/svelte';

async function fetchPageData(slug: string) {
  const client = localessClient({ origin, spaceId, token });
  try {
    return await client.getContentBySlug(slug);
  } catch (error) {
    if (error instanceof LocalessApiError && error.status === 404) {
      return undefined;
    }
    throw error;
  }
}

API Reference