Data Display

JsonViewer

Collapsible tree visualization of an arbitrary JSON value with hard depth and byte caps and a fallback for oversized payloads.

import { JsonViewer } from '@lostgradient/cinder/json-viewer';
jsoninspectortree
01

Overview

Collapsible tree visualization of an arbitrary JSON value with hard depth and byte caps and a fallback for oversized payloads.

Usage

svelte 
<script lang="ts">
  import JsonViewer from '@lostgradient/cinder/json-viewer';
</script>

<JsonViewer value={{ status: 'ok', items: [1, 2, 3] }} />
Live preview
02

When to use

Use when
  • Inspecting structured API responses, debug payloads, or configuration documents inside an admin or developer surface.
  • Rendering a JSON-serializable value with predictable initial-collapse behavior and no virtualization needs.
Avoid when
  • The payload is large enough to need search, filter, or virtualization — compose a custom viewer instead.
  • Showing arbitrary source code rather than a JSON value — code-block is the right surface for that.
03

Examples

Shallow object

A flat JSON object with mixed scalar values. The default initialDepth of 1 keeps the top-level keys expanded while deeper nodes start collapsed — useful for at-a-glance inspection.

Nested object and array

Deeply nested objects and arrays with initialDepth={2} so the second level starts expanded. Toggle nodes to drill into child collections — each branch remembers its collapsed state independently.

Oversized payload fallback

When the serialized payload exceeds maxBytes, JsonViewer renders a fallback instead of attempting the tree. Here maxBytes={256} triggers the cap on a ~500-byte object. Use the copy or download action in the host surface to inspect the raw JSON.

Payload inspector with copy

Pairing JsonViewer with CopyButton creates an operational payload inspector. A metadata header names the source event; CopyButton copies the raw JSON to the clipboard so engineers can paste into other tools. This pattern suits fault-detail and activity-result surfaces in operator UIs.

Primitive and null values

Each JSON primitive type — string, number, boolean, and null — rendered inline with type-specific color coding. Useful for verifying that scalar fields survive serialization round-trips.

04

Props

Props for json-viewer
Name Type Default Required Bindable Description
value unknown req The value to render. Any JSON-serializable structure.
initialDepth number 1 Initial collapse depth. Nodes deeper than this start collapsed. Default 1.
maxDepth number 50 Hard depth cap. Nodes deeper than this never render their children. Default 50.
maxBytes number 1048576 Hard byte cap on the serialized payload. Default 1_048_576 (1 MB).