Skip to content

JsonView

A JSON payload, pretty-printed and highlighted on the server, in a height-capped scroll region with a title and size meta. JsonViewGroup puts several side by side.

DataIsland

Examples

Call inspector panes

Request, raw result and what the agent received, side by side from 1100px. A JSON string is parsed and pretty-printed; TOON shows as text.

Request

48 B
Requestjson
{
  "arguments": {
    "repo": "acme/app",
    "state": "open",
    "token": "[redacted:key]"
  }
}

Raw result

212 B · 53 tokens
Raw resultjson
{
  "content": [
    {
      "type": "text",
      "text": "{\"items\":[{\"id\":1,\"title\":\"Fix login\"}]}"
    }
  ]
}

Agent received

31 B · 8 tokens · toon
Agent received
items[1]{id,title}:
  1,Fix login
Example
<JsonViewGroup>
  <JsonView title="Request" value={payload.request} meta="48 B" />
  <JsonView title="Raw result" value={payload.raw} meta="212 B · 53 tokens" />
  <JsonView title="Agent received" value={payload.sent} meta="31 B · 8 tokens · toon" />
</JsonViewGroup>

Truncated payload

A `{ $truncated, text }` marker shows its note above the cut text, so a partial payload never reads as complete.

Raw result

[truncated by Switchboard: showing 262144 of 901233 bytes]

Raw result
{"items":[{"id":1},{"id":2}
Example
<JsonView title="Raw result" value={{ $truncated: '[truncated by Switchboard: …]', text: '{"items":[…' }} />

Usage

Usage
import { JsonView, JsonViewGroup } from '@switchboard/ui'

<JsonView title="Request" value={payload.request} meta="48 B" maxHeight="20rem" />

Props

Every component also takes mix, for css() and mixins applied after its own style.

JsonView

JsonView props
PropTypeDefaultDescription
title*string–Pane heading; also the section label and the copy button name.
value*unknown–Any JSON value. Strings holding JSON are parsed; other strings show as text. null shows "Nothing recorded."
metaRemixNode–Quiet line under the title: sizes, tokens, encoding.
maxHeightstring'28rem'Max height of the scroll region.
wrapbooleantrueStart with long lines wrapped.

Also accepts every <section> attribute. The code area is a CodeBlock (copy, wrap toggle).

JsonViewGroup

JsonViewGroup props
PropTypeDefaultDescription
children*RemixNode–JsonView panes. Side by side from 1100px, stacked below.

Accessibility

  • Each pane is a <section> named by its title with an <h3>; the scroll region is focusable and named (CodeBlock).
  • The truncation note is real text with role="note", not a colour cue.

Guidance

Do

  • Show sizes and token counts as text in meta.
  • Redact secrets before the value reaches the page.

Don’t

  • Render an unredacted upstream payload.
  • Use it for short config snippets; use CodeBlock.