JSON Viewer

Paste JSON and explore it as a collapsible tree: expand and collapse nested objects and arrays, with color-coded types and item counts at every level.

json-viewer · runs locally

What this JSON viewer does

Reading a large JSON payload as text — even nicely formatted text — means holding the structure in your head while you scroll. A tree viewer offloads that: the document renders as nested, collapsible branches with item counts, so you can survey the overall shape first and expand only the path you’re investigating. Types are color-coded, which makes anomalies pop — the string "42" where a number should be, or a null where an object was expected.

The stats line above the tree reports total values, maximum nesting depth and document size — a five-second complexity assessment of any unfamiliar payload.

How to explore JSON as a tree

  1. Paste the JSON document and click View as tree.
  2. Read the top-level shape — the first two levels are pre-expanded.
  3. Click branch summaries to expand or collapse; drill into the data you need.

When the tree view earns its keep

Exploring an unfamiliar API response for the first time; locating which branch of a deep config actually contains a setting; eyeballing whether an array of records is homogeneous. When a document won’t parse at all, start with the JSON Validator to find the syntax error, then come back here to explore the fixed document.

Frequently asked questions

How is a tree viewer different from a formatter?

A formatter produces indented text; a tree viewer produces an interactive structure. In the tree you can collapse the branches you don't care about and drill into the ones you do — far more practical for large documents where formatted text means endless scrolling.

Why are some branches collapsed by default?

The first two levels open automatically so you see the document's shape immediately; deeper levels start collapsed to keep large documents manageable. Click any summary line to expand or collapse that branch.

What do the colors mean?

Keys are amber, strings green, numbers blue, booleans purple and null gray italic. Consistent color-coding lets you spot type problems at a glance — like a number that arrived as a string.

How large a document can the viewer handle?

Documents in the low megabytes render smoothly. The stats line shows total values, maximum depth and byte size, which is also a quick complexity read on an unfamiliar payload.