Real applications built with WildflowerJS. Pick your level and explore.
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.
A single-file clock with a smooth analog sweep on requestAnimationFrame, a digital view, and a timezone picker. The city wall keeps an array in state and renders it by hand, so it works with no list renderer.
A live-filtering list with no data-list renderer. The data stays an array in state; a computed filters it and the list body is re-stamped from a <template> on each keystroke. Shows list functionality without the reactive-list overhead.
Your first WildflowerJS component. State, binding, and actions in 10 lines.
Reactive state updates with computed properties, two-way model binding, and configurable step size.
Reactive lists with input binding, filtering, item actions, and computed counts.
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.
Enterprise data tables with sorting, pagination, and reactive components injected into table cells.
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.
Three live proofs: a swapped-in fragment auto-initializes with zero wildflower.scan() calls, hx-get and data-bind-attr coexist on one button, and hx-boost navigation survives a full body swap. Drop Wildflower into an htmx page, no extra wiring required.
Classic BASIC-era resource management game. Buy land, feed your people, plant crops, survive 10 years as ruler of ancient Sumeria.
Complete SPA with client-side routing, product catalog, shopping cart, checkout flow, and toast notifications.
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.
Full-featured kanban with drag-and-drop, modals, animated transitions, search filtering, and localStorage persistence.
Trip planner combining interactive maps, calendar scheduling, and sortable task lists. No wrapper packages needed.
Play chess against a minimax AI with adjustable difficulty. Board themes, piece sets, move list, captured pieces, and undo, all managed by WildflowerJS.
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. Pool-rendered bar chart, latency scatter, and traffic heatmap run alongside, on one data layer with zero chart libraries.
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.
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.
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.
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.
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).
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).
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.
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.
Same demos generated for Vue, Solid, and React from identical UAM manifests.
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.