One screen, three renderings
The leaseclock.com Lease list as HTML for people, JSON for programs and Markdown for agents, with what each costs an agent in tokens.
The Lease list of The leaseclock.com sample has one definition behind three renderings: HTML for people, JSON for programs and Markdown for Agents. The HTML and JSON print today; the Markdown rendering is a plan.
The screen
The list of Lease records in the Admin, with one lease, lease_1.
| Part | Rule |
|---|---|
Seven columns, residentName to status | list-columns, labels |
One search box, q | list-search |
Renew and Terminate on each row | verb-action |
HTML for people
<main>
<h2>Leases</h2>
<input type="search" name="q" placeholder="Search">
<table>
<thead>
<tr>
<th>Resident Name</th>
<th>Resident Email</th>
<th>Listing Url</th>
<th>Starts On</th>
<th>Ends On</th>
<th>Monthly Rent</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Maya Ortiz</td>
<td></td>
<td></td>
<td>12/1/2025</td>
<td>11/30/2026</td>
<td>1,450</td>
<td>active</td>
<td><button>Renew</button> <button>Terminate</button></td>
</tr>
</tbody>
</table>
</main>Classes, scripts and the sidebar are left out. Dates follow the browser's locale.
JSON for programs
The JSON is the Lease entry of the projection the list is built from. Its rows come from Lease.list on the API.
{
"noun": "Lease",
"key": "leases",
"label": { "one": "Lease", "many": "Leases" },
"representation": "residentName",
"screens": { "list": true, "record": true, "create": true, "edit": true },
"blocked": [],
"list": {
"columns": ["residentName", "residentEmail", "listingUrl", "startsOn", "endsOn", "monthlyRent", "status"],
"leftOut": ["notes", "terms", "documents", "property"],
"search": "q"
},
"fields": [
{ "name": "residentName", "label": "Resident Name", "kind": "text", "required": true, "form": true },
{ "name": "residentEmail", "label": "Resident Email", "required": false, "form": true },
{ "name": "listingUrl", "label": "Listing Url", "required": false, "form": true },
{ "name": "startsOn", "label": "Starts On", "kind": "date", "required": true, "form": true },
{ "name": "endsOn", "label": "Ends On", "kind": "date", "required": true, "form": true },
{ "name": "monthlyRent", "label": "Monthly Rent", "kind": "number", "required": true, "form": true },
{ "name": "status", "label": "Status", "kind": "text", "required": false, "form": true },
{ "name": "notes", "label": "Notes", "kind": "longText", "wide": true, "required": false, "form": true },
{ "name": "terms", "label": "Terms", "kind": "json", "wide": true, "required": false, "form": false },
{ "name": "documents", "label": "Documents", "kind": "text", "array": true, "required": false, "form": false },
{ "name": "property", "label": "Property", "kind": "reference", "to": "Property", "shows": "name", "required": false, "form": true }
],
"related": [],
"actions": [
{ "verb": "Lease.renew", "label": "Renew", "on": ["list", "record", "edit"], "inputs": {} },
{ "verb": "Lease.terminate", "label": "Terminate", "on": ["list", "record", "edit"], "inputs": {} }
]
}Markdown for agents
PlanMarkdown rendering
In the design, rendering-markdown gives every screen a Markdown rendering with the same facts as the HTML. Each record links to its own Markdown, and each Verb prints by name.
## Leases
1 lease. Search with `q`.
| Resident Name | Resident Email | Listing Url | Starts On | Ends On | Monthly Rent | Status |
| --- | --- | --- | --- | --- | --- | --- |
| [Maya Ortiz](leases/lease_1.md) | | | 2025-12-01 | 2026-11-30 | 1450 | active |
Verbs on each lease: `Lease.renew`, `Lease.terminate`.Token budget
Counted at 4 characters a token, over the blocks above.
| Rendering | Frame | Each lease | 25 leases |
|---|---|---|---|
| HTML excerpt | 101 | 64 | 1,701 |
| JSON projection | 458, once for every Lease screen | — | 458, plus the rows from Lease.list |
PlanMarkdown within an agent's budget
| Rendering | Frame | Each lease | 25 leases |
|---|---|---|---|
| Markdown | 59 | 21 | 584 |
In the design, an agent asks for a budget, such as a block of 120 tokens. The Markdown list fills it with the frame and 2 leases, and drops the lowest-ranked rows first. The HTML excerpt passes 120 tokens with one lease.
On every row
PlanThree renderings on every screen
In the design, every screen on every row renders all three ways: the Portal, each App per Persona and your own screens. A screen whose renderings disagree on a fact fails its check, by three-renderings.
UI and Renderers on the hub cover the renderers, their budgets and their parity tests.