Dynamic Islands Example

This example shows how to embed dynamic Preact components in otherwise static HTML content.

Embedded Client Counter:

Code Example:

Once your frontend framework plugin of choice is loaded, You can use the renderIsland function from the assets path to render and hydrate your client component.

import { html } from '@hyperspan/html';
import { createRoute } from '@hyperspan/framework';
import { renderIsland } from '@hyperspan/framework/assets';
// Import your Preact component like normal once the island plugin is loaded
import ExampleCounter from '@/src/components/ExampleCounter.tsx';

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

Read more about dynamic islands in the Islands Architecture docs.