JSON Tree Viewer

What the Tree View Actually Shows You

Braces are terrible at answering the one question you usually have about an unfamiliar payload: what shape is this? A 400-line HSS lookup drowns the answer in punctuation, and pretty-printing it only spreads the same punctuation over more screens. This viewer strips the syntax out and redraws the document as a text outline — one line per key, connected by ├─ and └─ rails, with every container labelled by size. A response whose top level reads Object{5} and whose sectors key reads Array[2] has told you almost everything you needed before you read a single value.

That outline is not a metaphor — it is the JSON data model rendered literally. The JSON grammar, standardised as RFC 8259, defines a document as objects and arrays nested around primitive leaves, and that is exactly what each line here is. Array items are numbered, so sectors printing 0: AB12-3CF and 1: AB12-9D1 gives you the index you will need when you go back to your code and write sectors[1].

Be clear about what this is, because a lot of tools called "tree viewer" mean something else: the pane on the right is read-only text, not a widget. There are no disclosure triangles and nothing to click — the whole document is drawn at once, and you scroll, select and copy it like any other text. That is a deliberate trade. A text tree can be pasted into a pull-request comment, a ticket or a chat message and it still looks like a tree at the other end, which is not true of a collapsible widget.

Reading a Document as a Tree

1. Put the JSON in the left pane – Paste it, or use "Upload" to pick a .json or .txt file — an uploaded file is pretty-printed into the input pane first, so you can still read and edit the source. "Sample" loads a small nested record if you just want to see the output shape.
2. Read the top line first – The first line is the whole document: Object{5} or Array[200]. If you expected an array of records and the first line says Object{1}, the payload is wrapped in an envelope — that one line has already saved you a scroll.
3. Follow the rails down – Each key sits on its own line at its own depth. A key whose value is a container shows the container's summary on the same line — profile: Object{2} — and its members appear underneath, held by the vertical rail.
4. Use the array indices – Array members are labelled with their position: 0, 1, 2. That is the number you will type back into your code, and it is why the tree is easier than counting commas in a formatted array.
5. Copy the tree if it is worth sharing – Select the pane and copy. It is plain ASCII, so it survives a code review comment, a README or a chat message unchanged — no screenshot needed.

Pro Tip: The tree is best on one deeply nested document. If what you have is an array of 200 similar records, the tree just repeats the same branch 200 times — JSON to Table puts those records in rows and columns instead, which is the view you actually want.

Example

A subscriber record with two nested objects and an array inside one of them. The tree on the right is the real output of this page, run against the exact JSON on the left — including the 19-digit ICCID, which arrives with all its digits because the parser here reads long integers as text rather than as JavaScript numbers.

{
  "msisdn": "447700900142",
  "iccid": 8901240544102066246,
  "profile": {
    "name": "Rosalind",
    "plan": "Unlimited 5G"
  },
  "network": {
    "cellId": "AB12-3CF",
    "rsrp": -92,
    "sectors": ["AB12-3CF", "AB12-9D1"]
  },
  "roaming": true
}

Object{5}
├─ msisdn: 447700900142
├─ iccid: 8901240544102066246
├─ profile: Object{2}
│  ├─ name: Rosalind
│  └─ plan: Unlimited 5G
├─ network: Object{3}
│  ├─ cellId: AB12-3CF
│  ├─ rsrp: -92
│  └─ sectors: Array[2]
│     ├─ 0: AB12-3CF
│     └─ 1: AB12-9D1
└─ roaming: true

Common Use Cases

Meeting an API response for the first time

The endpoint is new to you and the response is five levels deep. Paste it here and read the first three lines: you learn whether the payload is an envelope or a bare array, how many top-level keys there are, and which of them are containers. Getting that far by scrolling formatted JSON takes a couple of minutes; getting it from the tree takes about ten seconds, and you come away knowing which branch to go looking in.

Explaining a payload to someone else

Pasting 80 lines of JSON into a ticket is a way of asking a colleague to do the reading you did not want to do. Pasting the tree instead is a summary they can take in at a glance, and because it is ASCII it renders correctly in the ticket, in a review comment and in chat. If the point you are making is that two payloads differ, take it to JSON Diff — the tree shows shape, not change.

Sanity-checking a config before you ship it

Kubernetes manifests, Terraform state and network-element configs are all deeply nested, and the usual mistake is structural: a block landed one level too deep, or a value that should be a list is a single object. Both are obvious in the tree and easy to miss in the source, because a stray indent level looks like every other indent level. The MDN JSON guide is a reasonable refresher if the object-versus-array distinction is what tripped you up.

What It Does, Precisely

• One line per key – Depth is shown by indentation and rails, not by braces, so nesting is countable at a glance.
• Sizes on every container – Object{5} and Array[2] sit on the line of the key that owns them, so you know how big a branch is without expanding anything.
• Numbered array members – Items are labelled 0:, 1:, 2: — the index you need when you go back to code.
• Long integers survive – A 19-digit ICCID such as 8901240544102066246 is read as text, not as a JavaScript number, so it does not come back as 8901240544102066000.
• Values are printed raw – No quotes are added, which keeps the tree readable but does mean the string "10001" and the number 10001 look identical. Use the JSON Formatter when the distinction matters.
• Nothing is uploaded – Parsing and drawing both happen in your browser; an uploaded file never leaves the tab.

Frequently Asked Questions

Can I collapse a branch I do not care about?

No — and it is worth saying plainly rather than burying. The output pane is read-only text, drawn in full every time the input changes. There is nothing to click, nothing folds, and there is no hover behaviour. If a document is large enough that you need to hide parts of it, the tree is the wrong view for it; take an array of records to JSON to Table, where you can filter and sort, or query the file with jq on the command line.

How big a file can it take?

The whole tree is built as one string before anything is drawn, so cost grows with the size of the document, not with how much of it you look at. A few hundred kilobytes redraws without you noticing. A file of several megabytes will freeze the tab for a moment on every keystroke, because the redraw is debounced but not incremental. Past that point the honest answer is that a browser is the wrong tool: the jq manual covers filtering a large file down to the part you actually want first.

Why are the values not quoted?

Because the tree is drawn for scanning shape, and quotation marks around every leaf add noise to the thing you are scanning. The cost is real though: a zip code stored as the string "10001" prints exactly like the number 10001, and you cannot tell them apart here. When the type of a leaf is the question you are asking, format the document instead — the JSON Formatter keeps the quotes and colours strings differently from numbers.

My JSON has duplicate keys — which one shows up?

The last one. RFC 8259 allows duplicate keys and leaves the behaviour to the implementation; every browser parser keeps the final value and silently discards the earlier ones, so the tree shows one line where your source had two. That silence is the dangerous part — nothing warns you. If you suspect duplicates, run the file through the JSON Validator first.

Does anything leave my browser?

No. The document is parsed and the tree is drawn by code running in this tab. Nothing is sent over the network, nothing is stored, and a file you pick with Upload is read locally and discarded when you close the tab.

Related Tools

Useful Resources

• RFC 8259 – The IETF JSON specification — the data model each line of the tree corresponds to.
• jq Manual – Command-line filtering for documents too large to draw in a browser.
• Stack Overflow JSON Tag – Community answers for parsing, traversal and tooling questions.