create-foldkit-app
Scaffolding CLI for new Foldkit applications. Creates a ready-to-run project with Vite, Tailwind CSS, TypeScript, @foldkit/vite-plugin for hot reloading with Model preservation, your choice of rendering mode, and a starter example for SPA scaffolds.
Usage
npx create-foldkit-app
pnpm create foldkit-app
yarn create foldkit-app
bun create foldkit-app
The CLI prompts you for a project name, rendering mode, starter example, and package manager. Pass --name, --rendering, --example, and/or --package-manager to skip the matching prompts.
Rendering
spa | Render entirely in the browser. Starts from your choice of starter example below. |
ssg | Prerender routes to static HTML at build time, then hydrate in the browser. Scaffolds a small routed app with a server entry and a prerender script. |
ssr | Render each request on a Node server, then hydrate in the browser. Scaffolds a counter whose Flags come from the request, plus an Effect HttpServer host and a start script. |
The starter examples apply to spa rendering. The ssg and ssr modes scaffold their own starter apps.
Examples
counter | Simple increment/decrement with reset |
counters | A dynamic list of Counter Submodels with per-instance routing via a wrapper Message |
todo | CRUD operations with localStorage persistence |
stopwatch | Timer with start/stop/reset |
crash-view | Custom crash fallback UI with crash.view and crash.report |
slow-warnings | Interactive lab for slow update, view, patch, and Subscription dependency warnings |
form | Form validation with async email checking |
job-application | Multi-step form with async validation, file uploads, and per-step error indicators |
weather | HTTP requests with async state handling |
api-cache | Query caching in the Model with stale-while-revalidate, request deduplication, and interval refetching |
charting | Live GitHub and npm telemetry rendered through an ECharts Mount adapter |
routing | URL routing with parser combinators and route parameters |
upload | Simulated file uploads with cancellable, restartable interruptible Commands |
query-sync | URL-driven filtering, sorting, and search with query parameters |
snake | Classic game built with Subscriptions |
canvas-art | Declarative 2D canvas with shapes, animation-frame Subscriptions, and pointer events |
generative-art | Perlin-noise flow field with evolving particle trails, mouse vortex, and high-frequency Messages |
auth | Authentication with Submodels, OutMessage, and protected routes |
shopping-cart | Complex state management with nested Models and routing |
state-machine | Experimental state machine checkout with guarded branches and edge Commands |
pixel-art | Pixel editor with undo/redo, UI components, and localStorage persistence |
websocket-chat | Managed resources with WebSocket integration |
managed-resource-layer | Layer-backed ManagedResource lifecycle with an Effect service |
kanban | Drag-and-drop board with fractional indexing, keyboard navigation, and screen reader announcements |
map | Interactive MapLibre GL map with Mount and Subscriptions |
web-components | QR code designer wiring third-party web components into Foldkit with CustomElement.define |
embedding | A Foldkit widget embedded in a plain TypeScript host page with Ports and dispose |
ui-showcase | Every Foldkit UI component with routing and Submodels |
License
MIT