AbsoluteJS

Svelte Components

AbsoluteJS provides Head, JsonLd, Image, StreamSlot, and AwaitSlot for Svelte.

#Head Component

The Head component renders meta tags, Open Graph tags, Twitter Cards, canonical URLs, and robots directives. Import it from @absolutejs/absolute/svelte/components/Head.svelte.

HTML
<script>
  import Head from '@absolutejs/absolute/svelte/components/Head.svelte';
</script>

<html>
  <Head
    title="My App"
    description="A modern web application built with AbsoluteJS"
    icon="/favicon.ico"
  />
  <body>
    <h1>Welcome</h1>
  </body>
</html>

#JsonLd Component

The JsonLd component renders structured data as a <script type="application/ld+json"> tag. The @context is automatically added. Import it from @absolutejs/absolute/svelte/components/JsonLd.svelte.

HTML
<script>
  import JsonLd from '@absolutejs/absolute/svelte/components/JsonLd.svelte';

  const { title, author, datePublished, image } = $props();
</script>

<html>
  <head>
    <title>{title}</title>
    <JsonLd
      schema={{
        '@type': 'Article',
        headline: title,
        author: {
          '@type': 'Person',
          name: author
        },
        datePublished,
        image
      }}
    />
  </head>
  <body>
    <article>
      <h1>{title}</h1>
    </article>
  </body>
</html>

#Image Component

The Svelte Image component is a local component that uses the shared imageUtils module under the hood. It provides responsive srcset generation, WebP/AVIF format negotiation, and on-demand optimization.

HTML
<script>
  import { Image } from '@absolutejs/absolute/svelte';
</script>

<Image
  src="/images/hero.jpg"
  alt="Hero banner"
  width={1200}
  height={600}
  priority
/>

<!-- Fill mode -->
<div style="position: relative; width: 100%; height: 400px;">
  <Image
    src="/images/bg.jpg"
    alt="Background"
    fill
    style="object-fit: cover;"
  />
</div>

#Image Props

The Svelte Image component accepts the same props as the React Image component:

srcpath to the source image (required)
altalternative text for accessibility (required)
widthintrinsic width in pixels. Required unless fill is set.
heightintrinsic height in pixels. Required unless fill is set.
fillwhen true, the image fills its parent container
qualityoutput quality from 1 to 100
sizesresponsive sizes attribute
prioritypreload the image and disable lazy loading
placeholderplaceholder strategy while loading
blurDataURLbase64 data URL for blur placeholder
loading"lazy" or "eager"
unoptimizedskip optimization and serve the original
styleinline styles (string in Svelte)
classNameCSS class name
onLoadcallback when the image finishes loading
onErrorcallback when the image fails to load

#Streaming Components

Svelte exposes the shared streaming transport throughStreamSlot and the higher-level AwaitSlot primitive. Use StreamSlotwhen you want the raw transport directly. Use AwaitSlot when you want Svelte-authored fallback and resolved UI.

These primitives are only enabled when the route uses handleSveltePageRequest with { collectStreamingSlots: true } in the options argument.

This keeps authoring in normal Svelte markup while still letting async regions resolve independently of DOM order.

Raw transport with StreamSlot:

HTML
<script lang="ts">
  import StreamSlot from '@absolutejs/absolute/svelte/components/StreamSlot.svelte';
</script>

<main>
  <h1>Dashboard</h1>

  <StreamSlot
    id="svelte-activity"
    fallbackHtml="<div class=&quot;card-skeleton&quot;>Loading activity...</div>"
    resolve={async () => renderActivityHtml(await getActivity())}
  />
</main>

Framework-native transport with AwaitSlot:

HTML
<script lang="ts">
  import AwaitSlot from '@absolutejs/absolute/svelte/components/AwaitSlot.svelte';

  const activityPromise = getActivity();
  const metricsPromise = getMetrics();
</script>

<main>
  <h1>Dashboard</h1>

  <AwaitSlot id="svelte-activity" resolve={() => activityPromise} fallbackHtml="<div class='card-skeleton'>Loading activity...</div>">
    <ActivityPanel let:value {value} />
  </AwaitSlot>

  <AwaitSlot id="svelte-metrics" resolve={() => metricsPromise} fallbackHtml="<div class='card-skeleton'>Loading metrics...</div>">
    <MetricsPanel let:value {value} />
  </AwaitSlot>
</main>