---
title: json-render
description: How Framewerk relates to json-render — concept mapping only; the exporter is planned, not shipped.
status: planned
url: https://getairframe.com/framewerk/integrations/json-render
---

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

# json-render

**Status: planned.** There is no json-render exporter today. This page is a
concept-mapping table. There are no install instructions because there is
nothing to install.

json-render is schema-agnostic: you define a catalog of *your* React
components and map JSON to them. Framewerk is the opposite — an opinionated
document format with a reference renderer that needs no catalog of yours.
The relationship is **export** — post-1.0 — so a json-render host can draw a
Framewerk document through its own components.

## Concept mapping

| json-render concept | Framewerk equivalent |
| --- | --- |
| Component catalog (yours) | Built-in node types; user `components` are a separate, declared layer |
| Schema / JSON you send | A Framewerk `Spec` document |
| Props passed to your component | Node layout props + type-specific props |
| Conditional rendering | `showWhen` / `hideWhen` expressions |
| State / bindings | `stateVars` and action strings |
| Navigation | `navigate(screenId)` + `flows[]` |
| Theming | `styles[]` tokens and rules; `modes` for light/dark |
| Validation | `validate()` from `@framewerk/spec` — errors and warnings |

## The same screen, both shapes

Framewerk (what you write today):

**A Framewerk screen**

```json
{
  "formatVersion": "1.0",
  "screens": [
    {
      "id": "home",
      "layout": {
        "_id": "root",
        "type": "column",
        "gap": 16,
        "padding": 24,
        "children": [
          { "_id": "h", "type": "text", "variant": "heading", "content": "Coffee Cart" },
          { "_id": "go", "type": "button", "variant": "primary", "content": "Order" }
        ]
      }
    }
  ]
}
```

The same screen as json-render JSON bound to *your* catalog (illustrative,
not a shipped export):

```json
{
  "type": "Column",
  "props": { "gap": 16, "padding": 24 },
  "children": [
    { "type": "Heading", "props": { "text": "Coffee Cart" } },
    { "type": "Button", "props": { "label": "Order", "variant": "primary" } }
  ]
}
```

In json-render, `Heading` and `Button` must exist in your catalog. In
Framewerk, `text` and `button` are part of the format and the reference
renderer draws them with no components of yours. That is the whole
difference; neither is a subset of the other.

## When the exporter ships

It will lower a Framewerk document to json-render JSON for a host that
already has a catalog. Until then: no install, no CLI, no claim of support.
Follow the project changelog for the status flip.