Paste a document and see its structure as a diagram: one card per object or array, labelled edges between them, laid out automatically. Pan, zoom, collapse the branches you don't care about, and export the result as PNG, JPEG, or SVG — all in your browser, with nothing uploaded.
Graph mode is one of the five views each editor panel can switch between (text, tree, types, table, graph), chosen from the mode buttons at the top of the panel. It is a read-only view — a picture of the document's shape, not an editing surface — and it opens as a split pane, with the source text on one side and the diagram on the other, so you can edit on the left and watch the picture change on the right.
Every object and array becomes a card. Inside a card, each scalar is a plain
key: value row, and each nested container is a - key: {2 keys} summary row
with an edge running out of it to the card for that container. Edges are labelled with the key they came
from. Hex colour strings get a small swatch drawn beside the value, the same allowlist the rest of the
app uses (#RGB, #RRGGBB, #RRGGBBAA).
One shape is treated specially: an array whose every item is an object fans out — one edge per item, each landing on that item's own card, all sharing the array's key as their label. Every other container gets a single edge to a single card: a nested object, an array of primitives, an array of mixed types, an empty array. So an array of three records draws as three cards side by side, while an array of three strings draws as one card with three rows.
- to +, and
sibling rows on the same card are unaffected. Expand all and
Collapse all do the whole document at once.
The canvas is virtualized: only cards whose box intersects the visible viewport (plus a 200px margin) become real SVG elements, so panning around a big diagram stays smooth. The layout engine itself is loaded on demand the first time you open graph mode rather than on every page load, which is why you may briefly see Loading graph layout…; if that load fails, you get an explicit error with a Retry button rather than an empty canvas.
It is read-only. Nothing on the diagram edits the document — a click on a summary row collapses or expands that branch, and that is the entire interaction model for the cards. Editing happens in the source pane next to the canvas, or in Tree mode, which is the view built for changing values in place.
There are two size ceilings, and they measure different things. The first is 750 KB of source text, checked before the document is parsed at all — a coarse guard that mostly protects the parse itself. The second is 1,200 nodes, counted from the exact same graph the renderer would draw, so it is a real count rather than an estimate. The node limit is usually the one that stops a document, and the two can disagree sharply in either direction: a 200 KB flat array of 3,000 small objects produces 3,001 nodes and is refused, while a far larger document made of long strings may draw without complaint. Whichever limit trips, you get a message naming both the limit and your document's real figure, and a pointer to Text or Tree mode.
That second limit exists because of a specific failure. Graph mode originally had only the byte ceiling, and a 745,781-byte document containing 12,000 objects passed under it and then froze the browser tab for more than a minute inside the layout pass. Layout cost grows steeply and non-linearly with node count — measured at roughly 320ms for 500 nodes, 940ms for 1,500, 5.0s for 3,000, and 42.7s for 8,000 — and the layout call is a single synchronous step that cannot be interrupted once it starts. So the only safe move is to refuse before starting, and 1,200 is where that refusal sits to keep the worst case near a second. Very large documents are therefore declined outright rather than drawn slowly, which is the honest trade: no partial diagram, no spinner that never ends, and no frozen tab.
Collapsing survives panning, but not a rebuild. With Live Transform on, every edit rebuilds the graph from the new text — and a rebuild clears every collapsed branch and re-fits the view. If you have carefully folded a large document down to the part you care about, turn Live Transform off first; the diagram then holds its state until you ask for a Refresh.
Edges mean containment, not reference. JSON Schema $ref and
$id, foreign-key-style fields, and repeated values are never resolved into shared nodes, so
two identical objects at different paths are simply two cards with no edge between them. If you came
looking for a tool that draws the relationship graph implied by your data's IDs, this draws the
containment tree instead. Relatedly, a document whose root is a scalar is refused — a
bare 5, "hello", true, or null is valid JSON but has
no node-link diagram to draw, so graph mode says so and sends you to Text or Tree.
A few smaller things. The canvas has no keyboard navigation — panning is mouse or touch drag, and zoom is the wheel, a pinch, or the toolbar buttons, which are themselves focusable. The toolbar's Copy as image button is visible but disabled: it is not built yet, and the export menu is the working route to PNG, JPEG, and SVG. Resizing the panel recomputes which cards are drawn but deliberately does not re-fit the view, so it never yanks the diagram out from under a pan you just made. And a raster export past roughly 8000px on a side, or an estimated 20 MB, asks you to confirm first — that estimate is a rough one, biased toward warning early.
Example — this JSON:
{
"service": "checkout-api",
"region": "us-east-1",
"theme": {
"accent": "#2563eb",
"surface": "#f8fafc"
},
"dependencies": [
{
"name": "orders-db",
"kind": "postgres",
"critical": true
},
{
"name": "payments",
"kind": "http",
"critical": true
},
{
"name": "search",
"kind": "http",
"critical": false
}
],
"retries": {
"max": 3,
"backoff": {
"strategy": "exponential",
"initialMs": 250
}
},
"tags": [
"prod",
"pci"
],
"deprecatedAt": null
}
draws as 8 cards joined by 7 edges. The root card carries service, region and
deprecatedAt as plain rows, plus four summary rows. dependencies fans out into
three separate cards, one per record, each edge labelled dependencies. theme,
retries and tags each get a single card — and retries's card has
its own summary row for backoff, one level further down. Both values under
theme render with a colour swatch.
Open this example in the graph →
This link opens the JSON graph tool — a focused single-document view,
your source on the left and the diagram on the right — with the document above already loaded
in graph mode. No mode switch needed once you land.
No. The diagram is drawn in your browser from text you paste, drop, or open from disk — there is no server, no account, and no upload step. Every built file except the WebAssembly binaries is precached by a service worker on first visit, so the page and the layout engine both keep working offline afterwards.
Two separate ceilings apply, and a document has to clear both. The first is 750 KB of source text, checked before the document is even parsed. The second is 1,200 nodes, counted from the same graph the renderer would draw. The node ceiling is usually the one that stops a document, because nodes track how many objects and arrays you have rather than how many bytes: a 200 KB file that is a flat array of 3,000 small objects produces 3,001 nodes and is refused, while a much larger file of long strings may draw fine. Exceeding either one shows a message naming the limit and your document's actual figure, and points you at Text or Tree mode — it never hangs and never draws a partial diagram.
No. Graph mode is a read-only view of the document. Clicking a summary row collapses or expands that branch, and that is the only thing a click on the diagram does. Graph mode ships with a source pane beside the canvas, so you edit the text there and watch the diagram redraw; inline editing on the nodes themselves is Tree mode's job.
No. Every edge is a containment edge — this object contains that one. JSON Schema $ref and $id, foreign-key-style fields, and repeated values are not resolved or linked, so two identical objects at different paths are two separate cards with no edge between them. The one shape that is treated specially is an array whose every item is an object: it fans out into one card per item rather than a single list card.
Need to expand, search, and edit the same document rather than picture it? See JSON Tree Viewer.