Load the example or paste JSON. Select a node to read its value and copy its JSON Pointer path. Pointer and Patch guide
Visualize JSON as an Interactive Graph
Explore an API response or configuration as a diagram. Select a node to inspect its JSON value and copy its RFC 6901 Pointer. The sample matches the Pointer and Patch guide, so you can check the same paths in both places.
About JSON Graph Visualizer
The graph shows a bounded view: 500 nodes, 50 children per node and 60 levels. A partial-view notice identifies omitted structure; copied values come from the full parsed document. Node counts describe the rendered subset, and depth describes currently visible branches.
- SVG-based graph with nodes and connections
- Collapse and expand any branch
- Pan and zoom for large JSON structures
- Color-coded nodes by data type
- Node count and depth info at a glance
100% client-side. Your inputs never leave your browser. AdSense follows your privacy choices.
Frequently asked questions
How does the JSON graph visualizer work?
Paste JSON to draw a parent-child diagram. Select a node with a click or the keyboard to read its value and copy its JSON Pointer. Collapse branches, drag the canvas or use the wheel to zoom.
Is the graph visualizer free to use?
Yes, it is free and needs no account. The graph displays up to 500 nodes, 50 children per node and 60 levels. A visible notice identifies a partial view. SVG export is not currently offered.
Does the graph tool upload my JSON?
The document is parsed and visualized locally. The graph does not send JSON, property names, values or pointers in its analytics events. The website also uses advertising and audience measurement services; see the privacy policy for details.
Can it handle large JSON files smoothly?
The rendering limits keep the diagram bounded, but parsing still needs memory for the full input. Child counts show the actual number of direct children, even when some are omitted from the graph. Use JSONPath to select a smaller section for detailed exploration.
When should I use the graph viewer instead of the tree viewer?
Use the graph for the overall structure and the tree viewer for compact browsing. In this graph, selecting a node also gives you its exact Pointer and full value for copying, including values hidden by rendering limits.
Related guides
By Marco B.