Skip to content

Start

Quickstart

A static page with one interactive island, from empty route to working demo, in five minutes.

On this page

This is the shortest path to a working page: pure HTML with a single island that hydrates. If you have not added the package yet, do Install first.

1. Turn the page into a Page

Opt the route out of the Kit client so it ships no framework JS.

export const csr = false;

2. Write a normal Svelte component

Nothing ogygia-specific here. It is just a component.

<script>
  let { start = 0 } = $props();
  let count = $state(start);
</script>

<button onclick={() => (count += 1)}>count is {count}</button>

3. Mark the import to make it an island

The import attribute is the whole opt-in. The rest of the page stays static HTML.

<script>
  import Counter from '$lib/Counter.svelte' with { wake: 'load' };
</script>

<h1>A static page</h1>
<p>This heading and text ship zero JS.</p>

<Counter start={3} />

That is a working islands page. The heading and paragraph are server HTML forever; only Counter downloads JS, and only because you marked it.

4. See it live

The counter below is a real island on this very page, hydrated on load exactly like the code above:

Live since —

5. Change when it wakes

Swap the strategy and the island hydrates later. Nothing else changes:

import Counter from '$lib/Counter.svelte' with { wake: 'idle' };     // when the browser is idle
import Counter from '$lib/Counter.svelte' with { wake: 'visible' };  // when scrolled into view
import Counter from '$lib/Counter.svelte' with { wake: '(max-width: 600px)' }; // on small screens

Where to go next