Step 9

Interactive islands

For what genuinely needs a real framework — a dashboard, a complex cart — without the rest of the site stopping being HTML-first.

Marking the island

<div data-nexa-island="dashboard" data-nexa-strategy="visible">
    <p>Loading panel…</p>
</div>

The server only renders the fallback (the div's children, real content); mounting happens 100% on the client.

The mount contract

// src/islands/dashboard.island.ts
export default function mount(el, props) {
    // hand-written @nexa/reactivity, or a Vue/Preact/etc. adapter
    return () => { /* optional cleanup */ };
}

Any framework can implement this: hand-written code with @nexa/reactivity, or an adapter over Vue, Preact, whatever.

Without reopening composition

// nexa.toml
[imports]
dashboard = "/vendor/dashboard-island.js"

Rust never opens or interprets the specifier's module — to the compiler, a data-nexa-island is just another Element, like any other attribute.