Explore JSON in a collapsible interactive tree with a type badge on every node — click any value to copy it. Includes a copyable text outline and per-type counts.
Show calculation steps
Processed privately in your browser — nothing you paste is uploaded, logged or stored.
Structure you can fold
Beyond a few hundred lines, formatted JSON stops being readable — you scroll, you lose your place, you miscount brackets. The viewer renders the document as a collapsible tree: containers fold away, every node carries a type badge (object, array, string, number, boolean, null), and clicking any value copies it. A text outline with per-type counts gives you the copyable form of the same picture.
Worked example
Outline for an order payload:
(root) {object, 1 keys}
order {object, 5 keys}
id (string) "ORD-2041"
total (number) 129.5
paid (boolean) false
customer {object, 2 keys}
items [array, 2 items]When to use it
- First contact with an unfamiliar API response — see the shape before writing code.
- Hunting one value deep inside a large document without scrolling through everything.
- Checking types at a glance: the badge instantly reveals the classic string-vs-number id bug.
Limitations to know
- The tree opens two levels by default on purpose — fully expanding a huge document is a browser-melter; expand branches as you need them.
- Read-only by design: to change values, use the transformation tools (renamer, remover, sorter) in this cluster.
Common errors and fixes
- “not valid JSON” — the viewer needs parseable input; the error names the line and column, or run the JSON Validator for the full report.
- Need the path, not the value? — the JSONPath Finder is the same tree with paths as the copy target.
How to use the JSON Viewer
- Paste your JSON into the input panel.
- Click "View JSON" to get the type-annotated outline and the interactive tree.
- Expand and collapse containers in the tree; every node shows its type badge.
- Click any value (or press Enter on it) to copy it.
Frequently asked questions
What does a JSON viewer do that a formatter does not?
A formatter gives you indented text; a viewer gives you structure — a collapsible tree where you can fold away the parts you do not care about, see the type of every node at a glance, and copy individual values without hand-selecting text.
How do I see the data type of each field?
Every node in the tree carries a type badge — object, array, string, number, boolean or null — and the outline view prints the type next to every value, plus totals per type in the stats line.
Can I view very large JSON files?
The viewer handles multi-megabyte documents; above 2 MB it warns that rendering may take a moment. For huge files, collapse the tree (only the first two levels open by default) and use the outline for orientation.
How is this different from the JSONPath Finder?
The viewer is for exploring values and types; the finder is for getting each node's JSONPath expression to use elsewhere. Same tree interaction, different copy target.
