JsonViewer

Basic usage

CfJsonViewer accepts any JS value as data. Objects and arrays render as collapsible nodes; leaves are colored by type — strings green, numbers orange, booleans purple, null/undefined gray italic. Click the leading triangle to expand / collapse.

<CfJsonViewer :data="data" />

<CfJsonViewer data={data} />

Depth and type badges

defaultExpandDepth controls how many levels are expanded initially (0 = all collapsed, 1 = top level only, 2 = two levels …). showTypes appends a small string / number / boolean badge after each leaf — useful when debugging schemas.

<CfJsonViewer
:data="data"
:default-expand-depth="3"
show-types
/>

<CfJsonViewer
data={data}
defaultExpandDepth={3}
showTypes
/>

All types example

The dataset below covers all seven types — string / number / boolean / null / undefined / array / object — so each one’s coloring and collapse behavior is visible at a glance.

<CfJsonViewer :data="data" :default-expand-depth="2" show-types />

<CfJsonViewer data={data} defaultExpandDepth={2} showTypes />

API

Type exports:

type JsonValueType =
  | 'null'
  | 'undefined'
  | 'boolean'
  | 'number'
  | 'string'
  | 'array'
  | 'object';