How is this different from a JSON tree view?

A tree view is an indented list you expand level by level. A node graph draws each object as a card with edges for parent–child links, so you can see the overall shape of the data at a glance — which branches are biggest and which fields each array element has. It’s handy for understanding an unfamiliar API or explaining a data model. To format, validate or minify JSON, use the JSON formatter on this site.

Will a huge JSON file freeze the page?

Several limits keep it responsive. On load, the expansion depth is chosen from the number of containers per level, so about 250 cards are shown at first. Each card shows up to 50 items, with the rest behind a “show more” row. Cards and edges outside the viewport aren’t rendered, and at low zoom only card outlines are drawn. The graph is capped at 3,000 cards. Files of tens of megabytes take a moment to parse but browse smoothly.

Can search find content inside collapsed branches?

Yes. Search runs over the complete data and matches keys and values case-insensitively. When you jump to a result, every ancestor branch is expanded, the “show more” limit is raised if needed, and the view moves to the row, highlighted in orange.

How are YAML and CSV converted?

YAML is read with a standard parser: anchors and aliases are resolved and dates become ISO strings. For CSV, the delimiter (comma, tab, semicolon or pipe) is detected automatically, the first row supplies the field names and each following row becomes an object. Numbers and true/false are converted, while values with leading zeros such as 00123 stay strings.

🐙

🐙JSON Visualizer - View JSON, YAML or CSV as a Node Graph

Deeply nested API responses are hard to read as text — you end up counting brackets. This tool draws the data as a node graph instead. Every object or array becomes a card listing its keys and primitive values, while nested objects and arrays become cards of their own, connected by an edge to the row they belong to. Choose a tidy left-to-right or top-down tree layout; cards never overlap. Use the mouse wheel to zoom, drag to pan, or pinch on a touch screen, and click the button in a card’s corner to collapse or expand that branch. Search matches both keys and values; press Enter or the arrows to step through the results, and collapsed branches open automatically while the view glides to the match. Click any row to see its JSONPath (such as $.books[1].title) and full value below, ready to copy. Large files stay smooth: the graph opens at a sensible depth, each card shows 50 items with a “show more” row, and anything outside the viewport isn’t rendered. Besides JSON you can paste YAML, or CSV with a header row, which becomes an array of objects. Export the whole graph as an SVG or a high-resolution PNG. Parsing and drawing happen entirely in your browser.

Free · No sign-up · Runs in your browserLast updated: 2026-10-26

Loading tool...

How to use JSON Graph Visualizer

1Paste JSON, YAML or CSV, or open a file — the format is detected automatically
2Zoom and drag around the structure, collapse branches you don’t need and search for keys or values
3Click a row to see and copy its JSONPath and value, then export PNG or SVG if needed

FAQ

How is this different from a JSON tree view?: A tree view is an indented list you expand level by level. A node graph draws each object as a card with edges for parent–child links, so you can see the overall shape of the data at a glance — which branches are biggest and which fields each array element has. It’s handy for understanding an unfamiliar API or explaining a data model. To format, validate or minify JSON, use the JSON formatter on this site.
Will a huge JSON file freeze the page?: Several limits keep it responsive. On load, the expansion depth is chosen from the number of containers per level, so about 250 cards are shown at first. Each card shows up to 50 items, with the rest behind a “show more” row. Cards and edges outside the viewport aren’t rendered, and at low zoom only card outlines are drawn. The graph is capped at 3,000 cards. Files of tens of megabytes take a moment to parse but browse smoothly.
Can search find content inside collapsed branches?: Yes. Search runs over the complete data and matches keys and values case-insensitively. When you jump to a result, every ancestor branch is expanded, the “show more” limit is raised if needed, and the view moves to the row, highlighted in orange.
How are YAML and CSV converted?: YAML is read with a standard parser: anchors and aliases are resolved and dates become ISO strings. For CSV, the delimiter (comma, tab, semicolon or pipe) is detected automatically, the first row supplies the field names and each following row becomes an object. Numbers and true/false are converted, while values with leading zeros such as 00123 stay strings.