Four ways to read a JSON document

The status bar, and why it goes quiet

{
  "order": "A-1042",
  "lines": [
    { "sku": "PEN-01", "qty": 2 },
    { "sku": "PAD-02", "qty": 5 }
  ],
  "paid": true
}

10 nodes · depth 3

The count along the bottom is the same field on both sides of this example, and the switch is what fills it. That is not a bug worth apologising for — it is the visible edge of a deliberate decision about when the document gets taken apart.

In Code, a valid document is checked and left as text; nothing walks it. Counting values and measuring depth means building the tree, which is work, and doing it on every keystroke of a large file to keep a number in the status bar current would be the wrong trade. So the field waits until a structural view has built the tree anyway, and then shows what that tree contains.

Once it is there it stays useful: it is the quickest confirmation that a paste arrived whole, the quickest way to see that a filter really did cut the document down, and the number to quote when something feels slow.

The Code view

Code is the text itself, with syntax colouring, line numbers and the editing you would expect. It is where you type, and it is the only view that can show a document that does not parse — which is exactly when you need to see it.

Every error is underlined, not just the first. That matters more than it sounds: a parser stops at the first problem it cannot get past, so a tool that reports one error at a time turns a config with four mistakes into four rounds of fix-and-retry. The status bar names the first one and where it is, and the rest are marked in place, so one pass down the document fixes the lot.

The Tree view

The tree gives every value its own row, indented by how deeply it sits, with a fold control on every object and array. It is the view for reading an unfamiliar document, because you can close everything you are not interested in and the shape of what is left becomes obvious.

Along the top of the pane is the path to the selected row, as a trail you can step back along, with a control to copy that path as JSONPath or as JavaScript property access. Pasting the path into your own code is often the actual reason someone opened a document here, and copying it by hand out of a deep tree is exactly the kind of thing people get wrong.

The Table view and its export

An array of objects is a table, and the Table view shows it as one: a row per record, a column per key, and a badge on any cell holding an object or an array that you can drill into. It has enough to it — the column rules for ragged records, the breadcrumb back out, and an export that writes CSV, TSV or a Markdown table — that it has a page of its own, with a worked example of both exports printed exactly as they come out.

The Graph view

The graph draws objects and arrays as boxes joined by the keys that connect them. Where the tree answers what is in here, the graph answers how is this put together, which is the question you have about an API response you did not design.

It has a ceiling, and it tells you when it hits it. Past roughly two thousand nodes the picture stops being a diagram and becomes a hairball that takes a long time to lay out and teaches you nothing, so the view declines to draw and says why rather than grinding. On a document that size the tree, folded to a couple of levels, is the view that answers the same question.

Fold and expand to a level

The ▾ beside Expand all opens Level 1, Level 2 and Level 3. Picking one opens every branch to that depth and closes everything below it, which is a different and usually better move than expanding everything and scrolling. Two levels of a large config is often the whole summary you wanted.

Tree and Graph share the control and the levels mean the same thing in both, so a depth you found useful in one carries over when you switch. It is also the fastest way to collapse a document you have been rummaging through back to something you can read.

Preview an image

A value that looks like an image — a URL ending in an image extension, or a data: URI — previews on hover in the Tree, the Table and the Graph. It turns a column of opaque strings into something you can check at a glance, which is the difference between believing an export is right and seeing that it is.

A data: URI draws immediately, because everything needed is already in the document. A web address asks first, and that question is deliberate: fetching an image tells the server hosting it that you are looking at this document, and a tool that promises nothing leaves the tab should not quietly make a request on your behalf.