Skip to main content

jsonPreview Renderer

renderAs: 'jsonPreview' renders an object or array as an interactive collapsible JSON tree. String values that parse as JSON are automatically expanded.

Core Examples​

Expanded by Default​

Nested metadata object displayed as an expandable JSON tree.

Name
Metadata
Aurora Chen
"team": "platform"
"region": "APAC"
"tags":
0: "backend"
1: "infra"
"quota":
"q1": 42
"q2": 58
Mateo Silva
"team": "infra"
"region": "EMEA"
"tags":
0: "ops"
"quota":
"q1": 30
"q2": 45
Priya Nair
"team": "ops"
"region": "Americas"
"tags":
0: "platform"
1: "data"
"quota":
"q1": 70
"q2": 91
{ key: 'meta', renderAs: 'jsonPreview', renderAsOptions: { defaultCollapsed: false } }

Collapsed with Depth Limit​

defaultCollapsed: true folds nested nodes on initial render. The root object always stays expanded — only children at depth > 0 are collapsed. maxDepth truncates structures deeper than the given level.

Same metadata with nested nodes collapsed on load and a maxDepth of 2. The root object remains open; click ▶ to expand deeper nodes.

Name
Metadata (collapsed)
Aurora Chen
"team": "platform"
"region": "APAC"
"tags":
"quota":
Mateo Silva
"team": "infra"
"region": "EMEA"
"tags":
"quota":
Priya Nair
"team": "ops"
"region": "Americas"
"tags":
"quota": 
{ key: 'meta', renderAs: 'jsonPreview', renderAsOptions: { defaultCollapsed: true, maxDepth: 2 } }

String Values and Invalid JSON​

When the field value is a string, the renderer attempts to parse it as JSON. A valid JSON string is expanded into a tree. A string that fails to parse renders as a styled error block — it does not throw.

Aurora's value is a valid JSON string — rendered as a tree. Mateo and Priya have invalid strings — each renders a red error block showing the raw value.

Name
Raw Value
Aurora Chen
"team": "platform"
"region": "APAC"
Mateo Silva
Invalid JSON: {broken json
Priya Nair
Invalid JSON: not json at all
// Valid JSON string — parsed and rendered as an interactive tree
{ key: 'raw', renderAs: 'jsonPreview' }  // value: '{"team": "platform"}'

// Invalid JSON string — renders a red error block, does not throw
{ key: 'raw', renderAs: 'jsonPreview' }  // value: '{broken json'

Options Reference​

OptionTypeDefaultEffect
defaultCollapsedbooleantrueCollapse nested nodes on initial render. The root object stays expanded.
maxDepthnumber3Truncates nested structures beyond this depth. Must be ≥ 0.
classNamestringunsetAdditional CSS class on the root element.

Caveats​

  • String values are attempted to be parsed as JSON. A successful parse renders the structure as an interactive tree. A failed parse renders a styled red error block (Invalid JSON: <raw value>) — it does not throw.
  • The root object or array is always expanded regardless of defaultCollapsed. Only nodes at depth > 0 are affected.
  • Negative maxDepth values are clamped to 0, which renders only the root level with all children truncated as [...] or {...}.
  • formatter can pre-process the value before rendering. Use it to extract a sub-field from an object, or to normalize a raw string before JSON parsing.
  • The JSON tree is read-only — values are not editable in-place.

See Also​