---
title: Introduction
description: Framewerk is a JSON format for what an application must do and the screens that answer it, rendered by the Framewerk renderer into interactive screens.
status: shipped
url: https://getairframe.com/framewerk/getting-started/introduction
---

> Part of the Framewerk docs. Index of every page: /framewerk/llms.txt

# 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](/framewerk/core/requirements.md) 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.

**A screen as JSON**

```json
{
  "formatVersion": "1.0",
  "screens": [
    {
      "id": "home",
      "layout": {
        "_id": "root",
        "type": "column",
        "gap": 16,
        "padding": 24,
        "children": [
          { "_id": "title", "type": "text", "variant": "heading", "content": "Coffee Cart" },
          { "_id": "order", "type": "button", "variant": "primary", "content": "Order", "action": "navigate(order)" }
        ]
      }
    },
    {
      "id": "order",
      "layout": {
        "_id": "order-root",
        "type": "column",
        "gap": 16,
        "padding": 24,
        "children": [
          { "_id": "order-title", "type": "text", "variant": "heading", "content": "Order" },
          { "_id": "order-back", "type": "button", "content": "Back", "action": "back()" }
        ]
      }
    }
  ]
}
```

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](/framewerk/getting-started/quick-start.md) — a screen in one HTML file, then four steps.
- [Core](/framewerk/core/document.md) — the format, one concept per page.
- [Vocabulary](../vocabulary.md) — what Framewerk, the renderer and Airframe each name.