---
title: Code generation
description: One Framewerk screen and the React it lowers to — routes, components, state and actions mapped field by field.
status: shipped
url: https://getairframe.com/framewerk/guides/code-generation
---
> Part of the Framewerk docs. Index of every page: /framewerk/llms.txt
# Code generation
A Framewerk document carries enough structure to generate code from: `route`
for the URL, `instructions` for what the path cannot say, `components` for
reusable subtrees, and action strings for navigation. This guide shows one
screen and the React it lowers to, then the mapping table.
Nothing here runs a generator for you — it is the contract a generator (or an
agent) follows.
## One screen
**A sign-in screen**
```json
{
"formatVersion": "1.0",
"screens": [
{
"id": "signin",
"route": "/signin",
"title": "Sign in",
"instructions": ["Stack screen; on success replace with home"],
"stateVars": { "email": { "type": "string", "default": "" } },
"layout": {
"_id": "root",
"type": "column",
"gap": 16,
"padding": 24,
"children": [
{ "_id": "h", "type": "text", "variant": "heading", "content": "Sign in" },
{ "_id": "e", "type": "input", "label": "Email", "placeholder": "you@example.com" },
{ "_id": "go", "type": "button", "variant": "primary", "content": "Continue", "action": "navigate(home)" }
]
}
},
{
"id": "home",
"route": "/",
"title": "Home",
"layout": {
"_id": "hr",
"type": "column",
"padding": 24,
"children": [{ "_id": "hh", "type": "text", "variant": "heading", "content": "Home" }]
}
}
],
"flows": [{ "from": "signin", "to": "home", "trigger": "Continue" }]
}
```
## The React it lowers to
```tsx
// app/signin/page.tsx — route "/signin" from screen.signin
"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
export default function SigninPage() {
const router = useRouter();
const [email, setEmail] = useState(""); // stateVars.email
return (
Sign in
{/* text[variant=heading] */}
{/* action: navigate(home) → route "/" from screen.home */}
);
}
```
`route` picks the file. `instructions` become comments or JSDoc above the
component. `stateVars` become `useState` seeds (always strings in the spec;
coerce in the component). Action strings become the router call.
## Mapping table
| Framewerk | React (Next App Router) |
| --- | --- |
| `screens[].id` | Route segment / component name |
| `screens[].route` | File path under `app/` (`/signin` → `app/signin/page.tsx`) |
| `screens[].instructions` | File-level comment or JSDoc |
| `stateVars` | `useState` per variable (string initial) |
| `type: "column"` / `"row"` | `flexDirection: "column"` / `"row"` on a `div` |
| `type: "text"` | `` or ``; `variant: "heading"` → `