Client-side navigation (SPA)

This whole site now uses bext's built-in client router. Click any sidebar link: the content (<main>) is swapped with no full reload, the URL + history update, and the transition runs through the View Transitions API. The sidebar, header, and footer (outside <main>) persist.

Tip
Open the Network tab and navigate: no document reloads, just a small HTML fetch per page (prefetched on hover). Islands re-mount and highlighting re-applies via the "bext:navigated" event. It's a ~2KB script, opt-in from your layout.

What the router does

  • Soft-nav: intercept links, fetch HTML, swap <main>, pushState.
  • Hover prefetch (link rel=prefetch) — the page is already there on click.
  • Native View Transitions around each swap.
  • Persistence: sidebar / header / footer stay mounted.
  • Re-runs island scripts + a "bext:navigated" event for content scripts.
  • Automatic hard-nav fallback for full-hydration pages.

Enable it (in your layout)

layout.tsxTSX
import { clientRuntimeBody } from "@bext-stack/framework/client";

// In your root layout <body>, once:
<script dangerouslySetInnerHTML={{ __html:
  clientRuntimeBody({ navigation: true, viewTransitions: true })
}} />

// That ~2KB script intercepts same-origin <a> clicks, fetches the page,
// swaps <main> (sidebar/nav/footer outside it persist), updates history,
// and wraps the swap in a View Transition. It prefetches on hover, and
// re-runs island + content scripts after each swap.

// Content scripts (highlighting, charts) re-init on the lifecycle event:
document.addEventListener("bext:navigated", () => rehighlight());