JSON Viewer

A collapsible view of a parsed value. Collapsed nodes show their size, because "three entries or three thousand" is the question you have before expanding one.

src/components/ui/json-viewer.tsx

About

From the component's own source, where it was written.

A collapsible view of a parsed JSON value.

Takes a value, not a string: the caller has already parsed it in every real case (an API response, a config object), and re-serialising just to re-parse loses undefined, dates and anything else that survives in memory.

Collapsed nodes show their size, because "does this array have three entries or three thousand" is the question you actually have before expanding one.

Install

npx astralyx-ui add json-viewer

Usage

import { JsonViewer } from '@/components/ui/json-viewer'

<JsonViewer value={response} defaultExpandedDepth={2} />

Composer

Change the props and the source below follows.

name:"astralyx-ui-kit"

version:"1.4.2"

private:true

Props

defaultExpandedDepth

tsx

<JsonViewer value={response} defaultExpandedDepth={1} />

Examples

Package manifest

tsx

<JsonViewer value={manifest} defaultExpandedDepth={2} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`JsonViewer`

Extends Omit<ComponentProps<'div'>, 'value'>.

Prop	Type	Default	Description
value	Json	required	A parsed value, not a string — re-serialising to re-parse loses everything that only exists in memory.
defaultExpandedDepth	number	1	How many levels start open.

Types

Type	Definition	Description
`Json`	string \| number \| boolean \| null \| Json[] \| { [key: string]: Json }	A collapsible view of a parsed JSON value.