JSON graph — visualize a JSON document as a node-link diagram

About this page

A single-document view: your JSON on the left, the same document drawn as a node-link diagram on the right. Paste or open a file and the diagram is built as you type. Everything happens in this browser tab — the document is never uploaded, and there is no server to upload it to.

How the diagram is built

Each object or array becomes one card, with a row per scalar field. A nested object or array becomes its own card, joined to its parent by an edge labelled with the key it sits under, and the parent keeps a {N keys} or [N items] summary row you can click to collapse or expand that branch. Values that parse as a hex colour get a small swatch beside them.

What you can do

• Pan by dragging, zoom with the wheel, or pinch and drag on a touch screen.
• Centre, fit-to-view, zoom in and out, and flip the layout between top-down and left-to-right.
• Search the whole document — a match behind a collapsed branch is revealed rather than skipped.
• Collapse every branch at once, then open just the part you care about.
• Export the diagram as PNG, JPEG or SVG.
• Turn Live Transform off if you would rather redraw on demand with the Refresh button while editing a large document.

Size limits, stated plainly

The diagram is capped at 1,200 nodes. That is a measured limit, not a round number: the layout pass is synchronous and cannot be cancelled once it starts, and measured layout times climb from about 0.7 s at 1,200 nodes to 2.9 s at 2,000 and over 10 s at 4,000. Past that the tab stops responding, which is worse than a clear refusal. A document over the cap is refused with a message saying so; the text editor still holds your whole document either way, and nothing is discarded. A 750 KB cap on the source text is applied first, as a cheap guard on the parse itself.

The canvas is virtualized — only cards whose box intersects the visible viewport (plus a small margin) become real SVG elements — so panning around a large diagram stays smooth. The layout engine is fetched the first time you open this page rather than on every page load, which is why you may briefly see Loading graph layout….

Accessibility

The toolbars, menus and the source editor are keyboard reachable, and the diagram's own toolbar buttons are ordinary focusable controls. The collapse and expand toggles that live inside the cards are drawn in the diagram's own coordinate space, so their on-screen size changes with the zoom level: at a typical fit-to-view zoom they are well under the 44 × 44 px touch-target guideline, and we do not claim they meet it. Making them meet it at every zoom level is not possible with a single row height — the arithmetic and the two rejected fixes are recorded in our notes. Zooming in enlarges them, and every branch a card toggle reaches can also be reached from the source editor and from tree view.

Related

The two-document editor has this same graph view alongside text, tree, table and column views, plus compare, transform and schema tools. See also about the JSON graph visualizer, JSON tree viewer, and all tools.