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	Add and remove independent Counter Submodels in a dynamic list. Each row is embedded through h.submodel and routed through a wrapper Message.
Todo	A todo list persisted in localStorage. Add, complete, and delete tasks.
Stopwatch	A stopwatch with start, stop, and reset. Demonstrates a time-based Subscription.
Crash View	A custom crash fallback with a button that crashes the application and an action that reloads it. Demonstrates crash.view and crash.report.
Slow Warnings	Trigger slow update, view, patch, and Subscription dependency warnings at their default thresholds, then inspect them in a visible log.
Form	A form with field validation, error states, and asynchronous 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	A live dashboard for public Foldkit telemetry from GitHub and npm. Demonstrates HTTP Commands, asynchronous state, an ECharts Mount adapter, and a Subscription that turns chart clicks into Messages.
Routing	A client-routed application with URL parameters, nested routes, rest segments, and navigation.
Route Transitions	A live log shows which Transition helper handles each navigation. Entering the gallery loads its catalog once, staying on a painting refetches only when its id changes, and leaving the studio saves a draft.
Interrupting Commands	Simulated file uploads driven by interruptible Commands. Cancel one upload, cancel every upload in flight, or restart a cancelled upload through a keyed interrupt registry and an outcome-carrying result Message.
View Transitions	Animated route changes with the View Transitions API. Transition types control direction-aware slides, and a shared element morphs from gallery card to detail hero.
Query Sync	A filterable dinosaur table where every control syncs to URL query parameters. Schema transforms accept valid states and replace invalid parameters with declared defaults.
Snake	The classic snake game. Keyboard input, game loop, and collision detection.
Auth	An authentication flow with Submodels, OutMessage, protected routes, and session management.
Shopping Cart	An e-commerce application with a product listing, cart management, and checkout flow.
State Machine	A 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	A pixel art editor with immutable undo and redo, time-travel history, Foldkit UI components, lazy views, Subscriptions, Commands that report errors as Messages, and localStorage persistence through Flags.
Job Application	A multi-step form with asynchronous email validation, cross-field date constraints, file uploads, and per-step error indicators.
WebSocket Chat	A ManagedResource owns a WebSocket connection lifecycle. Demonstrates connection state, reconnection, and frames entering update as Messages.
Managed Resource Layer	A layer-backed ManagedResource starts a ComputeEngine service from an Effect Layer, exposes it to Commands, and runs Layer finalizers when the Model turns it off.
Kanban	A drag-and-drop kanban board with cross-column reordering, keyboard navigation, fractional indexing, and screen reader announcements.
Map	An interactive MapLibre GL map with locations, search, and "find my location." Demonstrates a Mount integration with a third-party DOM library, plus a Subscription that turns map movement and marker clicks into Messages.
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, then click to bloom prismatic particle bursts. Demonstrates Canvas.view with hundreds of evolving Path strokes per frame, Effect Random for spawning, and simulation controls wired through Messages.
Web Components	A QR code designer integrates two third-party web components through CustomElement.define. The color picker emits CustomEvents as Messages, the QR element receives typed properties, and both communicate 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	An interactive showcase of every Foldkit UI component, with styled routed demos and their parent and Submodel wiring.
Personal Blog	A blog whose prose lives in Markdown files. The @foldkit/markdown Vite plugin compiles each file into a typed document, per-node view overrides style the result, and directive islands place a live Counter Submodel and Note callout between paragraphs.
Typing Terminal	A production real-time multiplayer typing speed game. A full-stack Effect application with an RPC backend and Foldkit frontend. Race your friends →