Live token tweaking, in plain Next.js + React

Every visible element on this page is driven by a --nextexample-* CSS custom property. Open the panel from the browser console and drag any slider — the change applies before the next paint, and survives React rerenders because the CSS vars live on :root, not in React state.

Console API: window.nextExample.toggleDesignPanel(). Storage prefix: next-example-tokens.

Soft-navigation analog of view-transitions: visit the /about page to verify panel state survives Next's client-routed navigation.

See the prose demo page for typography tokens in action.

Cards (spacing + radius + surface)

Card A. Padding driven by --nextexample-spacing-md, corners by --nextexample-radius, background by --nextexample-color-surface.
Card B. Stack gap driven by --nextexample-spacing-lg; outline by --nextexample-color-muted.

Buttons + links (accent / primary)

The styled rerender-verify section below proves the panel's tokens persist across React state changes.

Palette swatches

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Each swatch reads --nextexample-palette-{n}. The cluster's paletteCssVarTemplate is the only thing that decides this name — change it in default-cluster.ts and the apply pipeline writes a different variable on the next palette tweak.

Verify across rerender

Click the button to trigger a React rerender. Tweak any panel slider, then click again — the tweaked value should still apply, because the page reads CSS custom properties from :root rather than from React props. Toggle the child subtree to confirm React mount churn doesn't disturb the panel either.

Child subtree present. This block mounts and unmounts on every toggle. The panel's own DOM root is appended by the adapter outside the React tree, so React reconciliation can never touch it.