Requirements + screens as JSON → Framewerk renderer → interactive screen

Framewerk is a JSON document format for application screens — layout, components, state, actions, styles, flows — and the requirements those screens answer, plus a reference renderer that draws the screens as interactive screens with no components of yours. Requirements are a draft part of the format. If you write React/TypeScript and want UI from JSON, this is written for you. You do not need to have seen Airframe; Airframe is the product that authors and serves these documents, and it is optional.

The workflow, in three steps:

write (or generate) a spec → render it → export it to code.

A spec is a plain JSON document. The Framewerk renderer (@framewerk/renderer) draws it in any React app. From there, the document's route, instructions and structure give a code generator — or an agent — enough to lower it into your codebase.

That one document is the whole interface for this screen: no component catalog, no build step, no design tokens imported from elsewhere. The renderer knows about forty node types and draws each one itself.

Airframe is built on it

Airframe, the app that authors and serves these documents, is built on top of this open-source format and draws its screens with this same reference renderer. Every screen in Airframe's editor is a Framewerk document, and the engine that draws it is the published @framewerk/renderer, not a private fork — so what Airframe shows is what the renderer draws in your app, from the same JSON.

Where to go next

• Quick Start — a screen in one HTML file, then four steps.
• Core — the format, one concept per page.
• Vocabulary — what Framewerk, the renderer and Airframe each name.