Skip to content

Complete apps

Seven complete apps. Each one lives under site/src/examples/complete/ as a runnable project (drop into a fresh project with kerfjs installed and they run — six are Vite projects; the live poll is served as authored source with no build at all).

AppDemonstrates
TodoMVCdefineStore · each · delegate · delegateCapture · localStorage round-trip via effect
Live Markdown editorcomputed (memoized render) · raw() + DOMPurify · data-morph-skip for the editor pane
Mini KanbanKeyed each across multiple parents · delegateCapture for pointerdown · data-morph-skip on the dragging card
Chat UIStreaming via one signal write per chunk · each memo key per chunk · data-morph-skip on the composer textarea · Tier 1 delegate() everywhere
Realtime dashboardeach perf at scale (500 rows) · batch · data-morph-skip for a chart canvas · effect for WS lifecycle
Row selectorFine-grained signal bindings — a bound class + bound detail pane update on select with no render re-run and no list reconcile
Live poll (no build step)The html tagged template + an importmap — a complete app served as authored source; fully-bound mount (the render runs once, forever)

Each thumbnail is an animated capture of the real app running — click through to the live demo. (Captured with domotion-svg; they animate inside the page and scale crisply.)

Animated preview: adding three todos and toggling one complete

Animated preview: editing the Markdown source and the sanitized preview updating live

Animated preview: dragging cards across columns, with the per-column counts updating

Animated preview: sending a prompt and watching the bot reply stream in token-by-token

Animated preview: the live ticker table updating at 30 Hz with a sparkline in the header

Animated preview: clicking rows in a host list; the highlight and detail pane follow while the "list renders" counter stays at 1

Animated preview: voting in a poll; counts pop and bars slide while the "renders" counter stays at 1