⌘ K
collapsible · type-colored · keyboard-friendly

Browse JSON as a collapsible tree

Expand/collapse branches, see types at a glance, and survey huge JSON blobs without scrolling miles of indentation.

JSON Tree Viewer Workspace
Input size
156 B
9 lines
Keys
8
leaf+nested
Style
tree
collapsible
Status
Valid
deep ok
Click ▸ to expand · 2 levels open by default
input · json
output · tree
{
"user": {
"id": 1,
"name": "Ada",
"active": true,
"tags": [ … 2 items ],
"meta": { … 2 keys }
}
}
Quick Start

How to view JSON as a tree

A flat JSON.stringify dump is hard to skim once payloads grow. This viewer renders a typed, collapsible tree so you can drill in only where you care.

  1. 01

    Paste JSON

    Drop any valid JSON. Big payloads open with 2 levels expanded — drill deeper as needed.

    Inputs parse through the native JSON.parse reviver chain — strict RFC 8259. Any syntax error returns line and column for the exact offending byte.

    any sizeRFC 8259JSON.parsestrictlive
    input · raw.json · RFC 8259
    {"user":{"id":1}}
    loaded · parsed RFC 8259RFC 8259 · ready
  2. 02

    Toggle nodes

    Click ▸ to expand, ▾ to collapse. Counts show how many keys/items are hidden.

    Indent options run through JSON.stringify(value, null, n); the second argument lets you sort, transform, or omit keys via a replacer if you ever wire one in.

    expandcollapseindentJSON.stringifylive
    tree · optionsnodes · live
    ▾ user
  ▸ meta … 2 keys
    options applied · livelive
  3. 03

    Spot types fast

    Strings (green), numbers (amber), booleans (purple), null (italic grey). Types stand out visually.

    Large documents stream through a useMemo with stable hashing so options re-apply instantly — no full re-parse if only formatting changes.

    typedcoloredmemoisedinstantdiff-friendly
    types · renderedcolor · ready
    "Ada" 36 true null
    rendered · livediff-friendly
  4. 04

    Copy pretty JSON

    Need the canonical pretty form? One click copies a fully-expanded indented version.

    Download is a Blob with application/json; copy uses the Async Clipboard API. Both round-trip identically to what the page rendered.

    prettycopyclipboardblob.json
    export · copiedready · done
    ✓ Copied
    shipped · ready to shipsuccess
Pro tips

Production-grade JSON, the right way

Stick to RFC 8259

Strict JSON has no NaN, Infinity, comments, or trailing commas. If you need those, look at JSON5 or JSON Repair.

Preserve key order for diffs

JavaScript preserves insertion order, but two parsers shouldn’t be assumed equal. Use Sort JSON Keys before diffing or hashing.

Big integers lose precision

JS numbers lose precision past 2^53−1. Transport large IDs as strings or use BigInt.

Escape inside HTML

When inlining JSON inside <script>, escape </ to <\/ so HTML parsing doesn’t close your tag early.

Validate at boundaries

Trust the wire as little as possible. Run incoming JSON through a schema (Zod / Pydantic) before it touches business logic.

Minify in production

Minify removes whitespace; gzip removes redundancy. Together they typically shrink JSON payloads 70–85% over the wire.

Related toolsJSON FormatterJSON to TableJSON ValidatorJQ PlaygroundJSONPath TesterJSON Diff
Use Cases

When to use a JSON tree viewer

Any time the structure matters more than the raw text.

Big API responses

Skim a 10,000-line response without scrolling — collapse the parts you don't need. Output round-trips losslessly through JSON.parse + JSON.stringify, so the file you save is byte-identical to what you see. Streaming parsers, jq pipelines, and Postgres jsonb columns all accept the result without complaint.

10× faster to scan

Audit logs

Drill into nested context to find anomalies in event payloads. Pairs perfectly with sort-keys + diff for review-friendly fixtures in CI. Whitespace-only churn disappears and reviewers see real changes, which keeps PR comments focused on logic rather than indentation.

cleaner PR diffs

Config inspection

Confirm a complex config compiled correctly without parsing JSON.stringify text. Handles emoji and non-ASCII via UTF-8 throughout — your data survives copy-paste between editors, terminals, and IDEs. Combining marks and ZWJ sequences come out the other side intact.

RFC 8259 valid

Demo / training

Walk a workshop through nested structures interactively. Re-parses on every keystroke so syntax errors are caught at the exact character. Strict RFC 8259 — no trailing commas, no comments, no unquoted keys — keeps downstream parsers happy.

round-trip safe

Quick exploration

When you don't know the shape — survey it visually first. Streams large documents without a server round-trip — privacy stays in the tab. Heavy parsing runs through useMemo so even 5 MB payloads keep the editor responsive.

schema-friendly

Code review

Drop a fixture JSON into the viewer to confirm intent matches code. Output is byte-stable: same input plus same options always produces identical bytes, ideal for content-addressed caches and snapshot tests. Downloads ship with the application/json MIME so editors apply syntax highlighting.

production-ready
FAQ

Frequently asked questions

Any depth. Performance depends on browser memory — millions of leaf nodes will be slow.
Not in v1 — use a JSONPath/jq tool to query, or copy the pretty JSON and Ctrl-F.
Defaults to 2 levels open for readability. Click ▸ to expand more.
No. All processing runs locally.
Yes — same order as the source.
Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

Sent straight to the maintainers · no account needed
47 in queue·8 shipped this month
Request queued. Thanks!