Dynamic Islands Example

This example shows how to embed dynamic client islands using React/Preact, Vue, and Svelte components in otherwise static HTML content.

Embedded Client Counters:

Code Example:

Import each component with an island attribute, then render it with renderIsland from @hyperspan/framework.

import { html } from '@hyperspan/html';
import { createRoute, renderIsland } from '@hyperspan/framework';
import ReactCounter from '~/app/components/client-counter.tsx?island=preact' with { island: 'preact' };
import VueCounter from '~/app/components/client-counter-vue.vue?island=vue' with { island: 'vue' };
import SvelteCounter from '~/app/components/client-counter-svelte.svelte?island=svelte' with { island: 'svelte' };

export default createRoute().get(async () => {
  return html`
    <div>
      ${renderIsland(ReactCounter, { count: 5 })}
      ${await renderIsland(VueCounter, { count: 10 })}
      ${await renderIsland(SvelteCounter, { count: 15 })}
    </div>
  `;
});

Read more about dynamic islands in the Islands Architecture docs.