@clank.run/framework
v0.19.5
Published
AI-first, zero-dependency full-stack TypeScript framework with SSR, live data, auth, deployment, and a complete headless UI library.
Downloads
3,916
Maintainers
Readme
Clank is a dependency-free framework and open-source deployment platform for building full-stack TypeScript applications. It combines fine-grained reactivity, compiler-powered TSX, server rendering with node-preserving hydration, built-in authentication, user-owned SQLite data, live queries, automatic MCP tools, immutable migrations, and health-gated deployment.
“AI-first” does not mean adding a chat box to every page. It means every application has two first-class interfaces backed by the same typed contracts:
| For people | For agents | | --- | --- | | Accessible HTML, responsive state, forms, navigation, Tailwind CSS, SSR, live updates, and inspectable workflow progress | Authenticated MCP tools, JSON Schema, OAuth + PKCE, explicit side-effect metadata, semantic UI inspection, and workflow graph manifests |
From zero to deployed
npm install --global @clank.run/framework
clank login
clank templates
clank create my-app
cd my-app
npm install
npm run devWhen the app is ready:
clank doctor
clank deployclank login connects to clank.run by default. Run clank without arguments
for the interactive launcher, or give the same commands directly to a coding agent or CI job.
Agents can inspect the exact starter capabilities with clank templates --json and receive a
checksummed file manifest plus next-command map from clank create my-app --json.
For a product built from a conversation, clank compose accepts an agent-prepared blueprint or a
deliberately configured agent executable, freezes a checksummed file review, and writes nothing
until a person or orchestrator approves that exact digest. Read the composition contract →
npm run dev is a complete local supervisor: it rebuilds TypeScript and Tailwind, starts only
healthy replacements, keeps the last good process after errors, and reloads connected browsers.
Agents can use clank dev --json for stable newline-delimited lifecycle events.
For deeper inspection, the dependency-free developer workbench makes policy, feature flags, revision replay, local/production parity, schema evolution, release provenance, progressive delivery, portable exports, sanitized clones, capacity estimates, action contract tests, provider conformance, visual baselines, and framework upgrades available to people, agents, and CI:
clank workbench help
clank workbench parity local-runtime.json production-runtime.json --json
clank workbench schema schema-current.json schema-target.json --jsonRead the workbench guide → Governance and approvals → · Revision and release lifecycle →
The generated app is already a working product—not an empty component. It includes:
- registration, login, logout, secure sessions, and CSRF protection;
- private per-user SQLite data with typed queries and mutations;
- bounded document revision history with conflict-safe compensating restores;
- durable typed job workflows with parallel branches, retries, cancellation, and visible graphs;
- server rendering and node-preserving hydration;
- live updates across tabs and browsers;
- Tailwind-compatible styling;
- an authenticated, app-specific MCP server;
- declarative managed file/image buckets with signed resumable uploads, owner isolation, quotas, local/S3 storage, and matching MCP tools;
- typed UI action references with generated UI↔MCP parity checks;
- deterministic synthetic fixtures and an application-owned contract test;
- an immutable initial migration and deterministic deployment contract; and
- focused
README.mdandAGENTS.mdinstructions.
The first deploy creates and links the hosted project automatically. Every later deploy builds a checksummed artifact, backs up data, applies ordered migrations, health-checks the candidate, and keeps the prior release available if activation fails.
For provider-isolated projects, one command adds secretless GitHub pull-request previews:
clank preview github configure owner/repositoryIt binds GitHub's immutable repository identity and writes pinned deploy/cleanup workflows. Each
job exchanges GitHub Actions OIDC for a one-time, 15-minute token that can touch exactly one
pull-N preview—never production or a sibling preview. No Clank token is stored in GitHub.
Read the pull-request preview contract →
Prefer a smaller starting point? Use
clank create my-app --template=minimal.
One application, one contract
flowchart LR
H["Human<br>browser UI"] --> C["Typed Clank<br>queries + mutations"]
A["Agent<br>MCP + OAuth"] --> C
C --> D["Isolated SQLite<br>live revisions"]
C --> S["SSR + hydration<br>live synchronization"]
C --> P["Deterministic deploy<br>migrate · verify · activate"]Define trusted server functions once. Clank infers their TypeScript clients, validates their
inputs and outputs, updates subscribed browser queries after commits, and publishes the eligible
functions as MCP tools. The MCP contract revision changes whenever a tool name, schema,
description, scope, or annotation changes, so clients can refresh without serving a stale action
model. Logical paths such as dailyLog.getDay publish as portable dailyLog_getDay tool names;
generated names use only ASCII letters, numbers, and underscores and stay within 64 characters.
The original action path remains available in tool metadata.
Each deployed app owns its authentication boundary, data, OAuth issuer, and MCP endpoint:
https://your-app.apps.clank.run/__clank/mcpLearn how per-app MCP works → · Build interactive MCP Apps →
Reactive code stays small
/* @clankImportSource @clank.run/framework */
import { computed, signal } from "@clank.run/framework";
const count = signal(0);
const label = computed(() => `Count: ${count.value}`);
export function Counter() {
return (
<button
class="rounded-full bg-slate-950 px-4 py-2 text-white"
onClick={() => count.value++}
agentId="increment"
agentLabel="Increase count"
>
{label.value}
</button>
);
}There is no virtual DOM. Components establish bindings once, and signals update only the text, attribute, or keyed region that depends on them. The included compiler handles TypeScript and TSX; applications do not need a separate runtime compiler or bundler.
A complete headless UI, already included
Clank includes a zero-dependency, Clank-native headless library with all 37 Base UI 1.6 families plus native Bottom Sheet and Pagination controllers: 39 documented families in total. It is not a React compatibility layer; factories return reactive controllers and DOM props that work directly with Clank TSX.
import { Portal, Show, onMount } from "@clank.run/framework/dom";
import { createDialog } from "@clank.run/framework/ui/dialog";
export function NewProjectDialog() {
const dialog = createDialog({ id: "new-project" });
onMount(() => dialog.dispose);
return (
<>
<button {...dialog.trigger()}>New project</button>
<Show when={dialog.isMounted}>
<Portal>
<div {...dialog.portal()}>
<div {...dialog.backdrop()} class="fixed inset-0 bg-black/50 data-[closed]:hidden" />
<section {...dialog.dialog()} class="fixed inset-4 m-auto max-w-lg rounded-2xl bg-white p-6">
<h2 {...dialog.title()}>Create a project</h2>
<button {...dialog.close()}>Cancel</button>
</section>
</div>
</Portal>
</Show>
</>
);
}The same primitives cover accessible relationships, keyboard and focus behavior, native form
projection, RTL-aware navigation, SSR/hydration, portals, presence, collision-aware positioning,
Tailwind data hooks, and frozen agent-readable manifests. Import from the package root, /ui, a
group path, or any /ui/<family> path. Ten immutable, typed theme presets are available from
@clank.run/framework/ui/theme, and every family has a real interactive specimen at
design.clank.run. Read the complete headless UI contract →
Field controllers compose directly with Select, Combobox, Autocomplete, Checkbox, Switch, Input,
Number Field, OTP Field, and Slider. Popup controllers expose explicit isMounted()/portal()
presence, native controls preserve browser submission and validation, and structured cancellation
keeps multi-part value changes atomic. These contracts give humans and agents the same small,
inspectable surface instead of hiding behavior in generated component code.
What is included
| Build the interface | Own the backend | Ship the product | | --- | --- | --- | | Signals, computed values, effects, stores, resources, typed TSX, keyed lists, forms, dialogs, tabs, routing, Tailwind CSS, SSR, and hydration | Runtime schemas, inferred API clients, auth, roles, owned documents, SQLite indexes, atomic mutations, live queries, first-party durable objects, files, email, jobs, workflow graphs, and webhooks | Interactive CLI, browser-approved login, project provisioning, durable invitation email, secrets, migrations, backups, job/cron/workflow operations, health gates, rolling activation, metrics, logs, custom domains, and rollback |
| Layer | Features |
| --- | --- |
| Reactivity and tasks | Signals, lazy computed values, effects with cleanup, batching, rollback transactions, untracked reads, owned roots, deep proxy stores, snapshots, async resources, stream reduction, plus an opt-in Task<Success, Failure, Requirements> runtime with typed causes, service layers, scoped resources, schedules, structured cancellation, tracing, and deterministic time |
| UI | Typed compiler-powered TSX, automatic reactive expressions and props, keyed lists, stable text nodes, lifecycle/context, a 39-family dependency-free headless catalog, native form parts, responsive bottom sheets, overlays, portals, RTL, SSR/hydration, agent manifests, directives, Show, For, Switch, and lazy components |
| Forms | Schema validation, typed fields, accessible control/error props, touched/dirty state, cross-field rules, cancellation, server errors, invalid-focus behavior, reset, agent-readable manifests |
| AI | Approval-bound conversational App Studio, unified user/agent governance, typed feature flags, signed exact-version blueprint registries, automatic MCP Streamable HTTP actions, OAuth + PKCE agent authorization, scoped grants and HMAC approvals, contract-generated tests, a redacted agent playground, semantic views, and isolated real-browser journeys |
| Delivery lifecycle | Immutable provenance, promotion evidence, progressive rollout guardrails, end-to-end revision traces and replay, production parity, schema evolution plans, sanitized clones, portable exports, capacity estimates, framework upgrade plans, and provider conformance |
| UI↔MCP parity | Typed agentAction function references, bounded SSR/DOM inspection, manifest and revision verification, stable-control enforcement, structured mismatch reports |
| Generated verification | Blueprint-derived synthetic fixture users and related records, real backend seeding, ownership isolation, exact agent/UI manifest parity, per-route SSR contracts, and a selector-free mobile Chrome smoke journey |
| Routing | Parameters, optional segments, wildcards, repeated query values, async loaders, aborts, guards, redirects, titles, links, history navigation |
| Full stack | Inferred schemas, documents, arguments, and results; branded IDs; query and mutation functions; zero-codegen typed API references |
| Auth | Email/password sessions, scrypt hashing, secure cookies, CSRF, roles, revocation, default auth UI, SSR boot state |
| Data | Node's built-in SQLite, JSON documents, declared expression indexes, owned tables, atomic mutations, immutable document history, compensating restores, persisted live revisions, dependency-tracked query cache, and privacy-first typed product analytics |
| Durable objects | Stable typed namespace/ID stubs, per-ID local FIFO lanes, renewable cross-process leases, stale-runtime fencing, transactional state, mutation idempotency, schema migrations, alarms with retry, live revision subscriptions, aggregate diagnostics, and opt-in exact-authorized MCP tools |
| Live sync | Auth-partitioned Fetch RPC and cache, EventSource streams, session revocation, automatic invalidation, SSR seeding, multi-tab synchronization, and bounded presence/cursor/signal rooms |
| SSR | Async string rendering, full-document templates, safe state serialization, CSP nonces, context and keyed lists, marker-based DOM-preserving hydration |
| Server | Fetch router, security headers, safe CORS, bounded Node HTTP adapter, Host checks, symlink-aware static files, response helpers |
| Object storage | Declarative app buckets with per-user isolation, atomic quotas, metadata listing, signed resumable browser access, public/private cache policy, verified images and MCP tools over atomic local or zero-dependency S3-compatible objects |
| Styling | Native class, reactive classList, style objects, CSS custom properties, and an atomic production Tailwind CLI pipeline |
| Deploy | Browser console, workspaces and RBAC, optional provider-neutral hosted plans and billing, activity feeds, ingress and provider resource metrics, transparent monthly usage and traffic limits, custom DNS/TLS onboarding, deterministic artifacts, empty-by-default previews with production-bound sanitized data policies, optional off-host release and backup objects, encrypted secrets, immutable migrations, encrypted local and generation-bound provider backup/restore, storage-backed readiness, health-gated releases, redacted local/provider logs, audit, rollback |
| Hosting safety | Explicit trusted/isolated profiles, isolated production default, constrained Docker runner, bounded artifacts, resource ceilings, and fail-closed runner configuration |
| Distributed execution | Durable leases, authenticated nodes, transactional process-slot placement, portable failover, stateful pinning, fenced operations, verified leased runtime transfer, provider-neutral agents, crash-safe provider data, deferred Docker activation, generation-bound ingress, encrypted restore plus explicit fenced-source provider recovery, private diagnostics/job controls, a complete restart-safe provider service, and an authenticated provider bridge |
Work on Clank itself
The framework has no dependencies, dev dependencies, or peer dependencies. Node 22.16+ provides the TypeScript transform and built-in SQLite primitives.
git clone https://github.com/nearbycoder/clank.run.git
cd clank.run
npm run check
npm run devOpen http://127.0.0.1:4173 for the dependency-free browser examples. npm only runs repository
scripts here; it does not install a framework toolchain.
| Example | What it demonstrates |
| --- | --- |
| /examples/todo | The smallest keyed CRUD interface |
| /examples/commerce | Catalog filtering, cart state, dialogs, and checkout forms |
| /examples/dashboard | Responsive SaaS navigation, tables, pagination, invitations, and settings |
| /examples/booking | Multi-step selection, validation, pricing, and confirmation |
| examples/fullstack | SSR, SQLite, live queries, and synchronization |
| examples/auth-todo | Auth, isolated user data, Tailwind, SSR, and full live CRUD |
| examples/durable-counter | Stable typed object IDs, serialized state, idempotent calls, and diagnostics |
Run the full-stack references separately:
npm run dev:fullstack # http://127.0.0.1:4180
npm run dev:auth # http://127.0.0.1:4181To develop the open-source control plane, run npm run dev:platform. Local platform work can use
clank login --server=http://127.0.0.1:4200; normal hosted use never needs the server flag.
For opt-in remote stateful projects, the package also ships clank-runner and
clank-provider. The control plane stays local-by-default; operators explicitly enable provider
placement, enroll a node, and select --placement=provider at project creation. See Remote
runtime placement before using it with production data.
Documentation
The documentation site is searchable, responsive, and published as HTML,
Markdown, JSON, llms.txt, and a complete agent corpus.
| Start | Build | Operate | Verify | | --- | --- | --- | --- | | Getting startedApplication recipesAI blueprintsGenerated admin studioCLI | ReactivityTyped tasksRenderingHeadless UIDesign systemFormsRoutingFull stackDurable objectsDurable jobs and cronTailwind | DeploymentInvitations and emailPreview environmentsUsage and limitsHosted plans and billingRunner fleetRuntime placementProvider adaptersProvider data lifecycleProvider Docker runtimeProvider runtime ingressComplete provider serviceDashboard and domainsMigrationsBackupsSelf-hostingRailway | Agent protocolPer-app MCPInteractive MCP AppsAuthenticationThreat modelASVS verificationConformance |
- Documentation site source
- Typed tasks, failures, and services
- Headless UI behavior
- Performance model
- AI-first contracts
- Conversational application building
- Semantic real-browser journeys
- Realtime presence, cursors, and signals
- Privacy-first typed product analytics
- Signed blueprint registry
- Agent access inbox and scoped grants
- Blueprint-generated admin studio
- Organizations, RBAC, invitations, and scoped tokens
- Service drivers for files, email, jobs, and webhooks
- Atomic local and S3-compatible object storage
- Managed application buckets
- Typed durable queues, worker processes, and cron
- Structured logs, traces, metrics, and health
- Durable distributed deployment and agent fencing
- One-time enrollment and deployment runner fleet operations
- Integrity-checked remote runtime placement capsules
- Portable deployment provider adapters and HTTP bridge
- Crash-safe provider SQLite and release lifecycle
- Isolated provider Docker launch and restart reconciliation
- Generation-bound provider runtime ingress and draining
- Complete fenced provider service composition
- Isolated, expiring preview environments
- Transparent usage accounting and traffic limits
- Provider-neutral hosted plans, checkout, and billing entitlements
- Managed ingress, custom domains, and external PostgreSQL
- Chaos and failure testing
- Public beta readiness
- Code and product audit
- Maintenance and release certification
- Release process
- Authentication API
- Security and deployment
- Database revisions and correctness
- Platform security
- Server primitives
- Architecture
- API reference
- Renaming from Proact
Design principles
- Infer from runtime contracts. Declare a validator once; TypeScript derives documents, IDs, function inputs, outputs, and clients while agents receive the equivalent JSON Schema.
- Update precisely. Components establish bindings once; signals update only the dependent region or property.
- Use the platform. Clank builds directly on DOM, Fetch, URL, AbortController, Proxy, Web History, Node, and SQLite primitives.
- Keep simple code simple. A component is a function, state is an object with
.value, and UI is ordinary HTML structure. - Make dangerous behavior legible. Actions declare side effects, confirmation expectations, validation, and authorization at their boundary.
- Make private data private by construction. Auth-required functions and owned tables make the safe path the short path.
- Treat deployment as a transaction. Build inputs, artifact contents, migrations, activation, recovery, and rollback remain explicit and auditable.
Open source
Clank is MIT licensed. Contributions are welcome—start with
CONTRIBUTING.md, and report vulnerabilities through the private process in
SECURITY.md.
The official npm package is @clank.run/framework.
It installs the clank and clank-platform commands. The unrelated unscoped clank package is a
different project.
