JSON live preview

Blueprint

Example

Local state with a list variable, $state bindings, closed on-actions, a sortable list bound to the list and a read-only workflow graph.

Blueprint JSON 263 lines

{
  "format": "texuli-blueprint",
  "version": 1,
  "spec": "0.3.0",
  "id": "json-preview-release-board",
  "catalog": "0000000000000000000000000000000000000000000000000000000000000000",
  "status": "draft",
  "createdAt": "2026-10-27T09:00:00Z",
  "updatedAt": "2026-10-27T09:00:00Z",
  "generator": {
    "kind": "agent",
    "name": "Harbor assistant",
    "model": "example-model"
  },
  "state": {
    "priorities": {
      "type": "list",
      "maxItems": 12,
      "initial": [
        {
          "id": "search",
          "label": "Faster search",
          "owner": "Search team"
        },
        {
          "id": "export",
          "label": "CSV export",
          "owner": "Data team"
        },
        {
          "id": "invite",
          "label": "Team invites",
          "owner": "Growth team"
        }
      ]
    },
    "review": {
      "type": "enum",
      "values": [
        "Priorities (not reviewed)",
        "Priorities (reordered)",
        "Priorities (pipeline checked)"
      ]
    },
    "showPipeline": {
      "type": "boolean",
      "initial": true
    }
  },
  "tree": {
    "id": "layout-page",
    "props": {
      "title": "Release week at Harbor Notes",
      "description": "Fictional data. Reorder the priorities; the pipeline shows how a release ships."
    },
    "children": [
      {
        "id": "layout-stack",
        "props": {
          "gap": "medium"
        },
        "children": [
          {
            "id": "layout-card",
            "props": {
              "title": {
                "$state": "review"
              }
            },
            "children": [
              {
                "id": "sortable-list",
                "props": {
                  "label": "Release priorities",
                  "itemDetail": "owner",
                  "reorder": {
                    "bind": {
                      "$state": "priorities"
                    },
                    "axis": "vertical"
                  }
                },
                "on": {
                  "move": [
                    {
                      "op": "setState",
                      "state": "review",
                      "value": "Priorities (reordered)"
                    }
                  ]
                }
              }
            ]
          },
          {
            "id": "control-toggle",
            "props": {
              "state": "showPipeline",
              "label": "Show the release pipeline"
            },
            "on": {
              "change": [
                {
                  "op": "setState",
                  "state": "review",
                  "value": "Priorities (pipeline checked)"
                }
              ]
            }
          },
          {
            "id": "layout-card",
            "props": {
              "title": "Release pipeline"
            },
            "when": {
              "op": "eq",
              "left": {
                "op": "var",
                "name": "showPipeline"
              },
              "right": {
                "op": "num",
                "value": 1
              }
            },
            "children": [
              {
                "id": "workflow-graph",
                "props": {
                  "label": "Release pipeline",
                  "mode": "view",
                  "graph": {
                    "version": 1,
                    "cycles": "forbid",
                    "nodeTypes": [
                      {
                        "id": "trigger",
                        "label": "Trigger",
                        "ports": [
                          {
                            "id": "out",
                            "direction": "out",
                            "kind": "flow",
                            "multiple": true
                          }
                        ]
                      },
                      {
                        "id": "step",
                        "label": "Step",
                        "ports": [
                          {
                            "id": "in",
                            "direction": "in",
                            "kind": "flow",
                            "multiple": true
                          },
                          {
                            "id": "out",
                            "direction": "out",
                            "kind": "flow",
                            "multiple": true
                          }
                        ]
                      },
                      {
                        "id": "finish",
                        "label": "Finish",
                        "ports": [
                          {
                            "id": "in",
                            "direction": "in",
                            "kind": "flow",
                            "multiple": true
                          }
                        ]
                      }
                    ],
                    "nodes": [
                      {
                        "id": "merge",
                        "type": "trigger",
                        "label": "Pull request merged",
                        "position": {
                          "x": 0,
                          "y": 0
                        }
                      },
                      {
                        "id": "test",
                        "type": "step",
                        "label": "Run the checks",
                        "position": {
                          "x": 240,
                          "y": 0
                        }
                      },
                      {
                        "id": "notes",
                        "type": "step",
                        "label": "Draft release notes",
                        "position": {
                          "x": 480,
                          "y": 0
                        }
                      },
                      {
                        "id": "ship",
                        "type": "finish",
                        "label": "Post to the team space",
                        "position": {
                          "x": 720,
                          "y": 0
                        }
                      }
                    ],
                    "edges": [
                      {
                        "id": "e1",
                        "from": {
                          "node": "merge",
                          "port": "out"
                        },
                        "to": {
                          "node": "test",
                          "port": "in"
                        }
                      },
                      {
                        "id": "e2",
                        "from": {
                          "node": "test",
                          "port": "out"
                        },
                        "to": {
                          "node": "notes",
                          "port": "in"
                        }
                      },
                      {
                        "id": "e3",
                        "from": {
                          "node": "notes",
                          "port": "out"
                        },
                        "to": {
                          "node": "ship",
                          "port": "in"
                        }
                      }
                    ]
                  }
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

Changes are checked 250 ms after you stop typing. Tab leaves the editor.

Result

Checking the blueprint…

Diagnostics

The validator is loading…

Rendered preview

Loading the player…

How the preview works

Parse. The text must be JSON; a syntax error is reported with its line and column.
Validate. The same checks the player runs: the local-state declarations, the player's binding checks and validateDraft from @texuli/catalog/validate with the player catalog (component ids, prop schemas, bindings, events and closed actions, block schemas, composition grammar and the untrusted URL policy). Each diagnostic lists its code, its message and its JSON path.
Paint or refuse. With no errors, <Player> paints the blueprint at the untrusted tier and validates it again. With any error the preview is cleared, never left showing an older result, and the status reads “Not rendered”.

What is in development

The player's runtime for the spec 0.3.0 interaction fields (local state in the envelope, on actions, reorder and workflow graphs) is in development and first published in @texuli/player 0.4.0.
@texuli/workflows, which paints the workflow-graph node, is in development and on npm as 0.18.0; the player's workflow-graph painter that uses it ships from the player's 0.4.0 release. The preview shows graphs read-only.
This page does not run the spec's own structural validator (validateBlueprint from @texuli/spec); the player's checks above decide what paints.