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:

Once your island plugins are loaded, use each plugin's render function to render and hydrate your component.

import { html } from '@hyperspan/html';
import { createRoute } from '@hyperspan/framework';
import { renderPreactIsland } from '@hyperspan/plugin-preact';
import { renderVueIsland } from '@hyperspan/plugin-vue';
import { renderSvelteIsland } from '@hyperspan/plugin-svelte';
import ReactCounter from '~/app/components/client-counter.tsx';
import VueCounter from '~/app/components/client-counter-vue.vue';
import SvelteCounter from '~/app/components/client-counter-svelte.svelte';

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

Read more about dynamic islands in the Islands Architecture docs.