JSON Graph Viewer: visualize JSON as a node diagram

What it does

A JSON document is a tree, but reading it as text means scrolling and counting braces. This viewer draws the tree instead. Each object or array becomes one box. Simple fields (strings, numbers, booleans, and null) are listed inside the box that holds them, colored by type. Nested objects and arrays get their own boxes, joined to their parent by a line, and laid out left to right so depth reads as distance.

The header of each box shows its key and size: customer {4} is an object with four keys, items [2] is an array with two entries. Click a box or a row and the Path cell shows its location in the document, such as $.items[1].price, ready to copy into code, a jq filter, or a bug report.

How to use it

1. Paste JSON into the input, use Open file to load a .json file from your disk, or press Load sample to see an example order.
2. Press Visualize (or Ctrl/⌘ + Enter). If the text is not valid JSON, the status cell shows the line and column of the problem and the cursor jumps there.
3. Drag the background to pan. Use the mouse wheel or the + and − buttons to zoom. Fit brings the whole diagram back into view.
4. Click the small − on a box to collapse everything under it, and + to bring it back. Expand all resets every branch.
5. Type in the search box to highlight boxes whose keys or values match. The counter shows how many matched, and the view moves to the first one.
6. Switch to Tree for an indented outline, which is easier for long documents. Export the diagram as PNG for chat and docs, or SVG for something you can scale or edit.

Worked example: reading an unfamiliar API response

Say a payments API returns this body and you need to know where the shipping status lives:

{"id":"ord_10442","status":"paid","total":129.9,
 "customer":{"id":"cus_771","name":"Ada Lovelace",
   "address":{"city":"London","country":"GB"}},
 "items":[{"sku":"KB-01","qty":1,"price":99.9},
          {"sku":"CB-USB","qty":2,"price":15}],
 "shipping":{"method":"express","tracking":null}}

Visualize it and the diagram shows a root box with three fields (id, status, total) and lines out to customer {3}, items [2], and shipping {2}. customer has its own child, address {2}, one level further right. The readout reports 7 nodes and depth 3. You can see without reading a single brace that addresses are nested two levels down and that each line item is a separate object.

Type tracking in the search box. One box lights up: shipping, with tracking: null in gray. Click that row and the Path cell reads $.shipping.tracking. That is the field to check, and the gray value tells you it is empty, not missing. In code that is body.shipping.tracking; in jq it is .shipping.tracking.

When a diagram beats text

• Learning the shape of a new API before writing types or a parser.
• Spotting why a field is undefined: it usually moved one level down into a wrapper like data.
• Explaining a payload to someone else: export a PNG and drop it in the ticket.
• Reviewing a config file with many nested sections, such as a CI pipeline or a feature-flag dump.

For pure formatting, the JSON Formatter is faster. For flat arrays of records, JSON to CSV gives you a table instead.

Large files

Drawing thousands of boxes makes any browser slow, so the diagram stops at 1,500 nodes and says so in the status cell. Collapse branches you do not need, or switch to Tree view, which handles larger documents. Boxes list up to 40 simple fields and summarize the rest. Inputs over 5 MB are refused.

Privacy

Parsing, layout, search, and export all run in this tab with JavaScript. The JSON you paste or open is never uploaded, stored, or logged. The layout library (dagre, MIT license) is served from this site, not from a third-party CDN. Closing the tab discards everything.