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. |
| Slow Warnings | Interactive lab for triggering slow update, view, patch, and Subscription dependency warnings with default thresholds and a visible warning log. |
| Form | Form handling with field validation, error states, and async submission. |
| Weather | Look up weather by zip code. Demonstrates HTTP requests and loading states. |
| API Cache | Query caching without a query client. Demonstrates stale-while-revalidate, request deduplication, invalidation, and interval refetching. |
| Charting | Live dashboard for public Foldkit telemetry from GitHub and npm. Demonstrates HTTP Commands, async state, an ECharts Mount adapter, and a Subscription that turns chart clicks back into Messages. |
| Routing | Client-side routing with URL parameters, nested routes, rest segments, and navigation. |
| Route Transitions | Live log of every navigation, narrated by the Transition helpers. Entering the gallery loads the catalog once, flipping paintings refetches only when the id changes via stayed, and leaving the studio saves a draft with exitedRoute. |
| Interrupting Commands | Simulated file uploads driven by interruptible Commands. Cancel a single upload, cancel every upload in flight, or restart a cancelled one; each cancellation resolves through a keyed interrupt registry and an outcome-carrying result Message. |
| 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. |
| Checkout Machine | Checkout workflow powered by the experimental state machine module. Guards skip Shipping for digital orders, gate Place order behind a complete review, and parse promo codes into applied discounts. |
| 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. |
| Managed Resource Layer | Layer-backed ManagedResource that starts a ComputeEngine service from an Effect Layer, exposes it to Commands, and runs Layer finalizers when the Model turns it off. |
| 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. |
| Embedding | A Foldkit widget embedded in a plain TypeScript host page through Runtime.embed. The host seeds initial state with Flags, pushes a step value in through an inbound Port, mirrors the count the widget emits through an outbound Port, and mounts and unmounts the widget with dispose. All communication crosses one Schema-typed handle; the host never touches the Model. |
| UI Showcase | Interactive showcase of every Foldkit UI component with styled examples, routing, and component state management. |
| Personal Blog | Blog whose prose lives in markdown files. The @foldkit/markdown Vite plugin compiles each file into a typed document at build time, the app restyles the fold with per-node view overrides, and directive islands place a live Counter Submodel and a Note callout between paragraphs. |
| Typing Terminal | A production real-time multiplayer typing speed game. Full stack Effect app with RPC backend and Foldkit frontend. Race your friends → |