Geist Design System

JSON View

Render JSON objects and arrays as a collapsible tree with syntax coloring, keyboard navigation, search highlighting, and selectable text.

Default

JSON View expands levels strictly below defaultExpandDepth. Use defaultExpandDepth={1} when the first level helps users scan the object without opening every nested value.

{cached: false,error: null}

Single line

Expanded objects with one short primitive key-value pair render on one line. Nested and long values remain multiline.

{ foo: "bar" }

Embedded

JSON View follows surrounding text before and after expanded fields.

ClickHouse slow query detected queryStats: {read_rows: 8866333,read_bytes: 1220624299,elapsed_ms: 10513774868,result_rows: 39,chunks_queried: 1,total_chunks: 1,stopped_early: false}, endpoint: 'GET /api/logs/request-logs'

Wrapped

Long primitive values use the multiline layout and wrap within the available width.

{browserApiUrl: "https://browser-api.vercel.sh/screenshot?url=https%3A%2F%2Fprocore-com-prod-f5vem4o6u-marketing-web-dev.vercel.app&width=1440&height=900&fullPage=true"}

Collapsed

Use defaultExpandDepth={0} when the surrounding surface needs to stay compact and users can choose which object to inspect.

Highlighted

Use makeJsonViewHighlightPattern to build the highlightPattern prop from search terms. The pattern highlights matching field names and primitive values.

{level: "error",requestId: "req_00042",deploymentId: "dpl_9WjH8QFQySx7",message: "Deployment request failed",statusCode: 500}

Best Practices

When to use

  • Use JSON View for JSON objects or arrays that users need to inspect, scan, collapse, expand, select, or copy.
  • Prefer JSON View over a raw JSON string when nested structure matters or when log lines contain structured payloads.
  • Use a regular code block when the value is static documentation, not an interactive product surface.

Behavior

  • Start with defaultExpandDepth={1} for log and detail surfaces where the top-level fields are useful by default.
  • Use defaultExpandDepth={0} for dense tables, compact previews, or rows where expanded JSON would compete with primary row content.
  • Pass highlightPattern only for active search states. Leave it null when nothing is being searched.
  • Keep the source data as an object or array. Do not pre-stringify JSON before passing it to data.

Accessibility

  • JSON View renders as a tree. Arrow keys move between visible nodes, Enter and Space toggle expandable nodes, and Home and End move to the first and last visible node.
  • Keep the component near the text or control that introduces the JSON. The accessible tree label is JSON, so surrounding context should identify the object.
  • Preserve selectable text. Users often copy JSON from logs or traces into search, support, or debugging tools.

Was this helpful?

supported.