Demos

Real applications built with WildflowerJS. Pick your level and explore.

BasicsLearn the fundamentals

Hello World MINI

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

data-bind data-action Component State
Demo Code

Counter MINI

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

data-bind data-action data-model Computed
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
IntermediateComponents, stores, and integration

Analytics Dashboard LITE

Multi-store architecture with real-time chart updates, computed metrics, and theme switching. Uses static data pools for the user table and activity feed. Zero reactive overhead with explicit update control.

Stores Static Pools Computed Dark Mode Chart.js
Demo Code

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

Three live coexistence proofs: jQuery delegation alongside data-action, jQuery DOM mutations on Wildflower-managed elements, and a zero-build boilerplate. Drop Wildflower into a legacy jQuery site, keep your existing code.

data-action data-event-stop data-list Stores jQuery 4.0
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
AdvancedComplex state, drag-and-drop, third-party coordination

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 working personal project manager, not just a demo. Your data persists in your browser via IndexedDB and stays across visits. Export to JSON for backup, 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

Integration Showcase MINI

Trip planner combining interactive maps, calendar scheduling, and sortable task lists. No wrapper packages needed.

Lifecycle Hooks Watch Sync Leaflet FullCalendar SortableJS
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

Mission Control Dashboard LITE

Real-time analytics with pool-rendered bar chart, latency scatter plot, and traffic heatmap alongside data-list feeds, SVG gauges, and sparkline KPIs. Five stores, zero chart libraries, pure DOM rendering.

data-pool Pure DOM data-list Stores SVG Gauges Computed Dark/Light
Demo Code

Stellar Flock LITE

3,000 ships flocking in 3D space via Three.js InstancedMesh. WildflowerJS drives the HUD and scanner overlay; Three.js reads component state directly through the context proxy. No wrappers, no adapters, no glue code.

Component State data-pool data-bind data-model 3D Boids Three.js
Demo Code
PoolsPull-based reactivity for high-frequency rendering

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 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, z-index depth sorting, all CSS, 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. All entities as plain objects, rAF flush, zero proxy overhead. Chrome SVGs pre-rasterized at load. 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

Same game using push-based data-list. Entities flow through WF's reactive proxy. Chrome SVGs pre-rasterized at load for smooth rendering. Every entity 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. Pool reads positions from shared linear memory each frame. Click to place attractors. Every body 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 drives the simulation via tick(); the component just 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

Framework Comparison

Same demos generated for Vue, Solid, and React from identical UAM manifests.

Dashboard
Vue Solid React
Kanban
Vue Solid React
E-commerce
Vue Solid React

This feature is experimental, and is here to show proof-of-concept. Learn more about UAM (Universal App Manifest), the tool for AI assistants that generated these demos.