Examples
Each example is available as a starter template via Create Foldkit App. Pick one that matches what you’re building, or start with Counter and work your way up. See Getting Started to get up and running.
| Example | Description |
|---|---|
| Counter | The classic counter example. Increment, decrement, and reset a number. |
| Counters | A dynamic list of Counter Submodels. Add and remove rows; each row is an independent Submodel embedded via h.submodel, with per-instance routing via a wrapper Message. |
| Todo | A todo list with local storage persistence. Add, complete, and delete tasks. |
| Stopwatch | A stopwatch with start, stop, and reset. Demonstrates time-based subscriptions. |
| Crash View | Custom crash fallback UI. Demonstrates crash.view and crash.report with a crash button and reload. |
| Form | Form handling with field validation, error states, and async submission. |
| Weather | Look up weather by zip code. Demonstrates HTTP requests and loading states. |
| Routing | Client-side routing with URL parameters, nested routes, and navigation. |
| Query Sync | Filterable dinosaur table where every control syncs to URL query parameters. Schema transforms enforce valid states. Invalid params gracefully fall back. |
| Snake | The classic snake game. Keyboard input, game loop, and collision detection. |
| Auth | Authentication flow with Submodels, OutMessage, protected routes, and session management. |
| Shopping Cart | E-commerce app with product listing, cart management, and checkout flow. |
| Pixel Art | Pixel art editor showcasing undo/redo with immutable snapshots, time-travel history, UI components (RadioGroup, Switch, Listbox, Dialog, Button), createLazy view optimization, Subscriptions, Commands with error handling, and localStorage persistence via Flags. |
| Job Application | Multi-step form with async email validation, cross-field date constraints, file uploads, and per-step error indicators. |
| WebSocket Chat | Managed resources with WebSocket integration. Connection lifecycle, reconnection, and message streaming. |
| Kanban | Drag-and-drop kanban board with cross-column reordering, keyboard navigation, fractional indexing, and screen reader announcements. |
| Map | Interactive MapLibre GL map with locations, search, and "find my location". Demonstrates OnMount integration with a third-party DOM library, plus a Subscription bridging map move and marker click events back to the Model. |
| Canvas Art | Click the canvas to spawn bouncing balls. Demonstrates declarative 2D rendering with Canvas.view, animation-frame Subscriptions, and pointer events translated to canvas-local coordinates. |
| Generative Art | Move the mouse to stir a Perlin-noise flow field, click to bloom prismatic particle bursts. Demonstrates Canvas.view with hundreds of evolving Path strokes per frame, Effect Random for spawning, and tunable simulation knobs wired through Messages. |
| Web Components | QR code designer wiring two real third-party web components into Foldkit with CustomElement.define. A hex color picker from vanilla-colorful emits color-changed CustomEvents that flow back as Messages, and the sl-qr-code element from Shoelace accepts typed properties. The picker and the QR never touch each other directly; they share state through the Model. |
| UI Showcase | Interactive showcase of every Foldkit UI component with styled examples, routing, and component state management. |
| Typing Terminal | A production real-time multiplayer typing speed game. Full stack Effect app with RPC backend and Foldkit frontend. Race your friends → |