Pattern

UI islands.

React, Vue and Svelte do not need special status inside Nift. They can simply be tools that produce JavaScript for interactive regions of an otherwise generated page.

Nift provides the document and mount point

<article>
  <h1>Product configurator</h1>
  <p>Most of this page is ordinary generated HTML.</p>
  <div id="configurator"></div>
</article>

<script type="module" src="@pathto('public/assets/configurator.js')"></script>

Your frontend toolchain produces the island

# Examples only — use the toolchain you prefer
npm run build
# or
bun run build

nift build

Vite, esbuild, Rollup or another bundler can compile a React/Vue/Svelte entry point into public/assets/configurator.js. Nift does not need to understand the component framework to reference its output.

Why use this pattern?

You can reserve client-framework complexity for the regions that need rich state and interaction while keeping the rest of the site as direct HTML. It is an architectural option, not a Nift requirement.

Several islands on one page

<div id="search"></div>
<div id="cart"></div>
<script type="module" src="\@pathto('public/assets/search.js')"></script>
<script type="module" src="\@pathto('public/assets/cart.js')"></script>

The islands do not even have to use the same framework if there is a genuine reason for them not to; from Nift's perspective they are simply browser assets referenced by the generated page.

Progressive enhancement

You can put useful HTML inside the mount region first, then let the client component enhance or replace it. Nift does not require interactivity to erase the server/generated document model.

Example repository

content/
templates/
frontend/
  src/configurator.tsx
  vite.config.ts
public/
  assets/configurator.js

The frontend directory can use the framework's normal conventions. Nift only references the browser artifact it produces.

Multiple pages, selective interactivity

A marketing page might have no island at all, a pricing page might mount one calculator, and an account page might mount a larger application. They can still share the same Nift template and navigation.