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, fit, q, f, thumbnail).

Original file and download links

A bare assetLink(asset) URL is a rendition, not the uploaded file: still images are re-encoded at their format's default quality even with no parameters. When you need the exact bytes that were uploaded, or want the browser to save the file instead of displaying it, use the client's assetOriginalLink() and assetDownloadLink():

<a href={client.assetOriginalLink(data.image)}>View the original file</a>
<a href={client.assetDownloadLink(data.brochure)} download>Download</a>

Neither accepts transform parameters. A request that adds any is rejected with 400. Downloads keep non-ASCII file names intact.

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