JSON Viewer
Paste a document and explore it as a collapsible tree.
- 6
- Keys
- 2
- Objects
- 1
- Arrays
- 2
- Max depth
The viewer renders JSON as a collapsible tree rather than as text. For a document of any size that is the difference between reading it and scrolling past it: branches below the second level start closed, each showing how many keys or items it holds, so the shape is visible before you open anything.
How it works
The document is parsed once and drawn as nested nodes. Objects and arrays become toggles; strings, numbers, booleans and null are leaves, colour-coded by type so a number stored as a string is obvious at a glance.
- Levels one and two open by default. Deeper branches stay closed, which keeps a 5,000-line API response to a screen of structure.
- A closed branch shows its child count, so you can tell a list of 3 from a list of 3,000 without expanding it.
- Array indices are shown as positions rather than keys, because that is what they are.
- The summary counts objects, arrays, keys and maximum depth, the quickest way to understand an unfamiliar payload.
Nothing is reformatted or rewritten. This is a reading tool; when you want the text itself indented or minified, that is the formatter's job.
Examples
An unfamiliar API response
JSON
A nested response, several levels deep
Result
Top two levels open, everything below collapsed with counts
You see the shape of the response immediately instead of hunting through indented text for where one object ends.
A number stored as a string
Value
"1815" against 1815
Result
Different colours in the tree
Quoted values render as strings and bare ones as numbers. This catches the class of bug where an id arrives as a string from one endpoint and a number from another.
A deeply nested document
JSON
Max depth 7
Result
Depth reported in the summary
Depth is worth knowing before you write code against a payload, because each level is another place a null can appear.
Frequently asked questions
Why are deeper branches closed when I open a document?
Because expanding everything defeats the purpose. A large response expanded in full is just the indented text again, which you can already read in the formatter. Starting with two levels open shows the structure, and you open only the branch you care about.
How is this different from the JSON formatter?
The formatter produces text you copy elsewhere. This produces a view you move around in, collapsing branches, counting children, spotting types by colour. Different jobs: one is output, one is exploration.
What do the colours mean?
Strings, numbers and the literals true, false and null each render differently. The practical value is spotting a type mismatch, an identifier quoted in one record and bare in another is visible immediately rather than after a failed comparison.
Will it open a very large file?
It parses whatever the browser can hold, but rendering tens of thousands of nodes will make the page slow to interact with. Collapsed branches are not rendered until opened, which is what keeps a large document usable, but a file of many megabytes belongs in a desktop tool.
Can I search inside the tree?
Not within the tool. Your browser's own find works on whatever is currently expanded, which is the honest limitation of a tree view: text that is collapsed is not on the page to be found.