Dynamic Islands Example

This example shows how to use the createPreactIsland function to create a dynamic island for a Preact component.

Embedded Client Counter:

Code Example:

You can use the createPreactIsland function from the assets path to create a dynamic island for your Preact components.

import { html } from '@hyperspan/html';
import { createRoute } from '@hyperspan/framework';
import { createPreactIsland } from '@hyperspan/framework/assets';

// Bun supports top-level await, so this compiles at build/server start time
const ExampleCounter = await createPreactIsland(import.meta.resolve('@/src/components/ExampleCounter.tsx'));

export default createRoute(() => {
  return html`
    <div>
      <!-- Call the component as a function and pass any props you need! -->
      ${ExampleCounter({ count: 5 })}
    </div>
  `;
});

Read more about dynamic islands in the Islands Architecture docs.