JSON & Data/JSON to Graph Visualizer
JSON to Graph Visualizer
Upload one or more JSON files and explore each as an interactive graph: click nodes to expand them, zoom and pan around large structures. Nothing leaves your browser.
Files are read in your browser and never uploaded. Select several at once to switch between them.
Legend
- Blue · object or array, children shown
- Yellow · object or array, collapsed (click to expand)
- Green · leaf value (string, number, boolean, null)
- Top label: key name
- Bottom label: value
- (5) object with 5 properties
- [3] array with 3 elements
What this does?
A deeply nested JSON document is hard to hold in your head as text. This tool draws it as a graph instead: the root sits on the left, and every object and array branches out to its children on the right. Each node shows its key on top and its value, or a size like (5) for an object with five properties, underneath.
The graph starts at the first level so a big file doesn't become a wall of nodes. Click any yellow node to open it, use Expand all to see everything, or Collapse all to go back to the first level. The color legend under the graph explains what each color means, and every file in the list remembers its own expanded branches while you switch between them.
It is handy for understanding an unfamiliar API response, comparing the shape of two configuration files, or explaining a data structure to someone else.
FAQ
Is my JSON uploaded anywhere?
No. Files are read with your browser and drawn locally. Nothing you upload or paste is sent to a server, logged, or stored on one. The sample files that load automatically are static files served with the site.
What do the node colors mean?
Blue nodes are objects or arrays whose children are showing. Yellow nodes are objects or arrays that are collapsed; click one to expand it. Green nodes are leaf values such as strings, numbers, booleans and null. Empty objects and arrays are green too because there is nothing to expand.
How do I read the labels on each node?
The top label is the key name (array items use their index, like [0]). The bottom label is the value for strings, numbers, booleans and null. For collections it is a size: (5) is an object with 5 properties and [3] is an array with 3 elements. Hover a node to see its full, untruncated text.
Can I open several files at once?
Yes. Drop or select multiple files and pick any of them from the file list. Each file remembers which nodes you expanded, and its zoom and pan position, while you switch between files. That state lasts for the current visit only and is cleared when you reload the page.
How do I zoom and pan?
Scroll the mouse wheel or use a trackpad or two-finger pinch to zoom, and drag the background to pan. The + and − buttons, Fit and Reset view are in the graph toolbar. With the graph focused you can also use the arrow keys to pan, + and − to zoom, and 0 to reset.
Is there a size limit?
Each file can be up to 5MB and contain up to 100,000 values. Expand all draws at most 3,000 nodes at a time so panning stays smooth; open the remaining branches one by one by clicking the yellow nodes.
Prefer a plain collapsible list with search and path copying? Try the JSON Tree Viewer → Need to check the syntax first? Open the JSON Formatter →