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, the stayed helper refetches a painting only when its id changes, and the exited helper saves a draft when you leave the studio. |
| 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. |
| View Transitions | Animated route changes with the View Transitions API. Direction-aware slides via transition types and a shared-element morph from gallery card to detail hero. |
| 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. |
| State 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. |
| Static Site Generation | A build script renders every route to static HTML through a server entry, and the client hydrates the served markup in place. The same init, view, and Model produce the build output and the running application. |
| Server-Side Rendering | A server renders each request into HTML using Flags read from a cookie, and the client hydrates with the exact values the server used. Reload the page and your latest count arrives already in the markup, before any JavaScript runs. |
| 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 → |