Preview Updated 2026-05-10

JsonViewer

Collapsible JSON tree viewer; values colored by type, with depth expansion and type badges.

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.

背景

{

id:"usr_2k1b9e"

name:"张小明"

active:true

createdAt:"2025-04-19T08:14:00Z"

tags:[[2]]

}

<script setup lang="ts">
import { CfJsonViewer } from '@chufix-design/vue';

const data = {
  id: 'usr_2k1b9e',
  name: '张小明',
  active: true,
  createdAt: '2025-04-19T08:14:00Z',
  tags: ['admin', 'beta'],
};
</script>

<template>
  <CfJsonViewer :data="data" />
</template>

<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.

背景

{

api:"/v1/users"string

pagination:{

page:1number

pageSize:20number

total:312number

}

filters:{

active:trueboolean

role:"admin"string

}

meta:{

plan:"pro"string

seats:12number

nullable:nullnull

flags:{

darkMode:trueboolean

beta:falseboolean

}

<script setup lang="ts">
import { CfJsonViewer } from '@chufix-design/vue';

const data = {
  api: '/v1/users',
  pagination: { page: 1, pageSize: 20, total: 312 },
  filters: { active: true, role: 'admin' },
  meta: {
    plan: 'pro',
    seats: 12,
    nullable: null,
    flags: { darkMode: true, beta: false },
  },
};
</script>

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

<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.

背景

{

string:"混合中英文 with emoji 🎯"string

multilineString:"line one line two"string

positiveNumber:12345.678number

negativeNumber:-0.42number

zero:0number

trueValue:trueboolean

falseValue:falseboolean

nullValue:nullnull

undefinedValue:undefinedundefined

emptyArray:[

]

emptyObject:{

}

nestedArray:[

1number

[[2]]

]

}

<script setup lang="ts">
import { CfJsonViewer } from '@chufix-design/vue';

const data = {
  string: '混合 中英文 with emoji 🎯',
  multilineString: 'line one\nline two',
  positiveNumber: 12345.678,
  negativeNumber: -0.42,
  zero: 0,
  trueValue: true,
  falseValue: false,
  nullValue: null,
  undefinedValue: undefined,
  emptyArray: [],
  emptyObject: {},
  nestedArray: [1, [2, [3, [4]]]],
};
</script>

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

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

API

Prop	Type	Default	Description
`data`	`unknown`	`—`	The JSON-like value to render; any JS object
`defaultExpandDepth`	`number`	`1`	Initial expand depth
`showTypes`	`boolean`	`false`	Show a type badge next to each leaf
`bordered`	`boolean`	`true`	Border
`lineNumbers`	`boolean`	`false`	Reserved — line number toggle
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Font size

Type exports:

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