Skip to content
ogygia Docs
Search docs ⌘K

Start

Quickstart

Build a static page with one interactive island, from an empty route to a working demo in about five minutes.

On this page

This walks you through the shortest path to a working page: plain HTML with one island that hydrates. If you have not installed the package yet, follow Install first.

1. Remove the Kit client

Start by turning off the Kit client for the route, so that it ships no framework JavaScript.

export const csr = false;

2. Write a normal Svelte component

Nothing in the component is specific to ogygia; it is an ordinary Svelte 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. Everything else on 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} />

You now have a working islands page. The heading and the paragraph are always server HTML, and only Counter downloads JavaScript, because it is the one you marked.

4. See it live

The counter below is a real island on this page, and it hydrates on load in the same way as the code above:

Live since —

5. Change when it wakes

If you change the timing word, the island hydrates at a different moment, and nothing else about the page 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