WildflowerJS Demos

Start HereYour first components, one file at a time

Hello World NANO

Your first WildflowerJS component. State, binding, and actions in 10 lines.

data-bind data-action Component State

Demo Code

Counter NANO

Reactive state updates with computed properties, two-way model binding, and configurable step size.

data-bind data-action data-model Computed

Demo Code

Tip Splitter NANO

A complete interactive widget in one HTML file, powered by the smallest Nano build. Computed totals, two-way inputs, reactive styling, and a conditional message.

data-model data-action data-render Computed

Demo Code

World Clock NANO

A single-file clock with a smooth analog sweep on requestAnimationFrame, a digital view, and a timezone picker.

Note: Nano builds do not include data-list, the core list reactivity you get with the Mini build and above, so this demo shows how to get a reactive list without it. The city wall clones a plain <template> by hand and the framework picks up each new city automatically.

Computed data-bind-style data-show Arrays in state

Demo Code

Searchable List NANO

A live-filtering list. The data is an array in state, a computed filters it, and the list body is re-stamped from a <template> on each keystroke.

Note: Nano builds do not include data-list, the core list reactivity you get with the Mini build and above, so this demo shows how to get a reactive list without it.

Computed data-action data-show Arrays in state

Demo Code

Todo List MINI

Reactive lists with input binding, filtering, item actions, and computed counts.

data-list data-model data-action data-show Computed

Demo Code

Data & Syncdata-query: live data, optimistic writes, persistence, SSR

Optimistic Tasks FULL v1.5+

Declarative writes against a server with an added delay. Every change shows on screen first, temp ids are replaced by server ids on confirm, and an armable reject switch shows field-level rollback live, with the rejected write reverting while an overlapping one stays. A server-computed work estimate comes from an async computed, and persisted rows paint instantly on reload.

data-query write() persist: Async Computed Optimistic UI Rollback

Demo Code

Status Page FULL v1.5+

Opens as a server-rendered status page and adopts it. Services, incidents, and the notice are read back out of the HTML with no loading flash, then stay live on polling, focus, and reconnect refreshes. You are the on-call operator. Status flips, incident posts, and resolves all write straight back, with temp ids, tombstone deletes, and an armable rejection to watch rollback happen. Open a second window to act as a second operator.

SSR Adoption data-query write() persist: Refresh Rungs Rollback

Demo Code

Shared Favorites FULL v1.5+

Ana and Ben share one table as independent data-query clients over the same server, converging through invalidateQueries after every settled write. Field-level claims let a star and a rename on the same row settle independently, an intent journal makes undo just another write, and persisted rows paint both panels instantly on reload. DataTables renders the grid.

data-query write() invalidateQueries persist: Undo as Writes DataTables

Demo Code

Mission Control Dashboard FULL

Opens as a server-rendered page. The KPI header and orders table are adopted from the HTML and kept live by data-query, with append pagination, tombstone deletes, and machine values carried in data-seed. A pool-rendered bar chart, latency scatter, and traffic heatmap run alongside on the same data, with no chart library.

SSR data-query data-seed data-pool Stores Pure DOM Dark/Light

Demo Code

Apps & GamesComplete applications: routing, stores, drag-and-drop, persistence

E-commerce Store SPA

Complete SPA with client-side routing, product catalog, shopping cart, checkout flow, and toast notifications.

SPA Routing Stores Computed Form Validation Plugins Notyf

Demo Code

Project Manager SPA

A personal project manager you can use for real. Your data persists in your browser via IndexedDB and stays across visits. Export to JSON for backup, or reset to demo data any time. Includes list and board views, status groups, priorities, assignees, labels, sub-issues with rollup, comments with reactions, saved views, favorites, command palette, keyboard nav, and more.

SPA Routing Stores Computed Item-level computed Subscriptions IndexedDB Watchers SVG charts SortableJS marked

Demo Code

Kanban Board CORE

Full-featured kanban with drag-and-drop, modals, animated transitions, search filtering, and localStorage persistence.

Stores Subscriptions Computed Animations Persistence SortableJS Driver.js

Demo Code

Chess MINI

Play chess against a minimax AI with adjustable difficulty. Board themes, piece sets, move list, captured pieces, and undo, all managed by WildflowerJS.

Watch data-list data-model data-show Chessground Minimax AI

Demo Code

Analytics Dashboard LITE

Multi-store architecture with real-time chart updates, computed metrics, and theme switching. Static data pools render the user table and activity feed, updated by explicit calls with no reactive overhead.

Stores Static Pools Computed Dark Mode Chart.js

Demo Code

Hammurabi MINI

Classic BASIC-era resource management game. Buy land, feed your people, plant crops, survive 10 years as ruler of ancient Sumeria.

data-bind data-model data-list data-render Computed

Demo Code

Pools: Per-Frame & SimulationPull-based reactivity for high-frequency rendering

Stellar Flock LITE

3,000 ships flocking in 3D space via Three.js InstancedMesh. WildflowerJS drives the HUD and scanner overlay, and Three.js reads component state directly through the context proxy. There is no wrapper, adapter, or glue code between them.

Component State data-pool data-bind data-model 3D Boids Three.js

Demo Code

Boids Flocking Simulation LITE

800+ autonomous agents at native frame rate. Spatial grid neighbor search, multi-flock coloring, predator/prey dynamics, and canvas trails. Every boid is a DOM element.

data-pool Pure DOM data-bind-style data-bind-class Spatial Grid

Demo Code

Lorenz Attractor LITE

Strange attractors rendered as pure DOM particles at native frame rate. Four presets (Lorenz, Aizawa, Thomas, Halvorsen), 3D rotation, depth-mapped color, radial glow. Every particle is a pool-driven div.

data-pool Pure DOM data-bind-style Chaos Math CSS Glow

Demo Code

3D Molecule Visualizer LITE

Rotatable 3D molecules from PubChem. Ball-and-stick, space-fill, wireframe modes. Half-colored bonds, zoom scaling, and z-index depth sorting, all in CSS with no WebGL.

data-pool Pure DOM data-pool-sort data-bind-style PubChem API

Demo Code

Tower Defense (data-pool) LITE

Full tower defense on data-pool. Entities are plain objects flushed on requestAnimationFrame, with no proxy overhead. SVG sprites are pre-rasterized at load, since Chrome re-decodes an SVG on every src change. Every enemy, tower, and projectile is a DOM element. Based on svelte-tower-defence by Ivan Semochkin (SvelteHack 2024).

data-pool Pure DOM Pull-based Reactivity SVG Pre-rasterize Game Plugin

Demo Code

Tower Defense (data-list) MINI

The same game on push-based data-list. Entities are tracked by the WildflowerJS reactive proxy, and the SVG sprites are pre-rasterized at load. Every entity is a DOM element. Based on svelte-tower-defence by Ivan Semochkin (SvelteHack 2024).

data-list Pure DOM Push-based Reactivity Computed SVG Sprites Game Plugin

Demo Code

N-Body Gravity LITE

700 bodies with O(n²) gravitational physics computed in a 295-byte WASM module. The pool reads positions from shared linear memory each frame. Click to place attractors. Every body is a DOM element.

data-pool Pure DOM data-bind-style WebAssembly AssemblyScript

Demo Code

Physarum (Slime Mold) Lite LITE

Multi-species physarum simulation rendered entirely in DOM. 4,000 invisible agents sense and deposit pheromone trails on a grid of 5,400 data-pool tiles. A headless store steps the simulation in tick(), and the component only renders. Mouse over the grid to paint food.

Inspired by Sage Jenson's 36 Points and Etienne Jacob's interactive-physarum. Both are licensed under CC BY-NC-SA 3.0; this demo inherits the same terms.

data-pool Pure DOM Store tick() data-model data-bind-style subscribe

Demo Code

Cascadia Interconnect LITE

A transmission grid simulated down to the wires. Stations are draggable pool cards, and the conductors are drawn on a canvas and sag as load heats them. Breakers, dispatch, weather, and cascading trips.

data-pool Canvas store.tick() DC Power Flow data-list

Demo Code

Airspace Board LITE

A live telemetry table of 500 to 2,000 aircraft, each reporting up to twenty times a second. The table is a pool in targeted mode, so only the rows marked dirty are written. Flights run from departure to arrival, and filtering, sorting, and selection are ordinary reactive state.

data-pool markDirty store.tick() Live Re-rank data-list

Demo Code

Wavelength LITE

A music player whose visualizer is made of DOM. Web Audio drives 128 bars, peak caps, and a bass glow, each an ordinary element styled in CSS. Linear, radial, SVG arc, and kaleidoscope modes, with the SVG pools templated inside the <svg>.

data-pool Web Audio store.tick() CSS Only Styling data-list

Demo Code

IntegrationsThird-party libraries, no wrappers

DataTables Integration MINI

Enterprise data tables with sorting, pagination, and reactive components injected into table cells.

Component Injection Watch Sync DataTables jQuery

Demo Code

jQuery Integration Lab MINI

jQuery delegation alongside data-action, jQuery DOM mutations on elements managed by WildflowerJS, and a no-build boilerplate, all live on one page. The two libraries share the DOM without conflict.

data-action data-event-stop data-list Stores jQuery 4.0

Demo Code

HTMX Integration Lab NANO

A swapped-in fragment initializes itself with no wildflower.scan() call, hx-get and data-bind-attr share the same button, and hx-boost navigation survives a full body swap, with no extra wiring.

data-model data-bind-attr Computed Hooks htmx 2.0

Demo Code

Web Component Bridge FULL

WildflowerJS integrates with Web Awesome 3.x's Shadow-DOM-encapsulated custom elements via wildflower.registerAdapter(). Two-way binding with data-model across six widget types, plus programmatic state updates pushed through the adapter's property and event mapping.

registerAdapter() data-model Shadow DOM Web Awesome 3.2

Demo Code

Integration Showcase MINI

Trip planner combining interactive maps, calendar scheduling, and sortable task lists, with no wrapper packages.

Lifecycle Hooks Watch Sync Leaflet FullCalendar SortableJS

Demo Code