Skip to content
ogygia Docs
Search docs ⌘K

Start

Quickstart

A static page with one interactive island. From empty route to a demo that operates, in five minutes.

On this page

This is the shortest path to a page that operates: pure HTML with one island that hydrates. If the package is not installed, do Install first.

1. Turn the page into a Page

Remove the Kit client from the route. Then the route ships no framework JS.

export const csr = false;

2. Write a normal Svelte component

There is nothing ogygia-specific here. It is only 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 full opt-in. The remainder 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 an islands page that operates. The heading and the paragraph are server HTML always. Only Counter downloads JS, because you marked it.

4. See it live

The counter below is a real island on this page. It hydrates on load, the same as the code above:

Live since —

5. Change when it wakes

Change the strategy word, 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