Showcase

Live demos that exercise the parts of the framework that are hardest to explain in prose: fine-grained reactivity, keyed list reconciliation, and what "real hydration" actually looks like in the DOM.

Shared-element transitions →

Click a card and watch its thumbnail morph into a full-page hero. Browser-native View Transitions API — no JS animation code.

Transition opt-out →

Side-by-side buttons: navigate with and without the View Transition animation. See the transition: false API in action.

---

1,000 reactive cells

1,000 independent signals. Click a button — only the cells you wrote to mutate. The grid renders exactly once; subsequent updates are per-text-node. Watch the timing field.

component: thousand-counter signals: 1,000 render: once

---

Keyed list (1k–10k rows)

Classic JS-frameworks-benchmark operations: create 1k or 10k rows, update every 10th, swap rows 1 and 998, append 1k more, clear. Nodes are reused on reorder — focus, scroll, selection state preserved.

component: keyed-list-bench reconciliation: keyed (For) up to: 11k rows

---

Hydration inspector

A live MutationObserver inside a component. Click "tick" — only one characterData event fires per update because text nodes mutate in place. Toggle the anchor view to see how the compiler delimits dynamic slots.

component: hydration-inspector observer: MutationObserver markers: pair-anchor (OPEN/CLOSE)

---

The original counter

From the quickstart — same component, four instances, all independent.