Components

JSON View

Structured data rendered readable, keys from values.

{
  "name": "buena mono",
  "version": 1.216,
  "axes": ["wght", "opsz"]
}

<pre>
  <span class="text-accent">"name"</span>: <span class="text-success">"buena mono"</span>
  <span class="text-accent">"version"</span>: <span class="text-warning">1.216</span>
</pre>

{
  ▸ "font": { … },
  ▸ "metrics": { … },
  ▸ "axes": [ … ]
}

defaultExpandDepth={0} keeps the tree closed so the surface stays compact — users open the branches they want to inspect.

{
  "event": "publish.failed",
  "requestId": "req_8f21",
  "retryable": true
}

makeJsonViewHighlightPattern(["request", "failed"]) builds the highlightPattern prop, emphasising matching field names and primitive values during an active search.

Markdown for agents: /design/json-view.md · spec: /design.md