Relationship Visualizer
JSON relationship visualizer online. Visualize JSON structure as an interactive node graph with connections. Explore object hierarchies, copy nodes, and pan/zoom—free in your browser.
Loading editor...
No JSON Data
Paste JSON in the editor or load sample data to visualize relationships
Features
- Interactive node-graph visualization of JSON structure
- Split-pane layout with live JSON editor and visual canvas
- Copy any node's JSON to clipboard with one click
- Collapsible editor panel for full-screen visualization
- Pan and zoom with mouse drag and scroll wheel
- Auto-fit graph to screen with smart zoom
- Color-coded nodes: indigo for objects, green for arrays
- Bezier curve connections with labeled relationship keys
Common Use Cases
- Understand complex API response structures at a glance
- Map relationships between entities in JSON data
- Visualize nested configuration files and their hierarchy
- Explore database export schemas with parent-child connections
- Document data models by visualizing JSON examples
- Debug deeply nested JSON payloads from microservices
Understanding JSON Relationships
JSON relationship visualization represents JSON data as a graph of interconnected nodes, making it easy to see how objects and arrays relate to each other.
How it works:
- Objects become nodes with their primitive properties listed inside
- Arrays become nodes with child connections to each element
- Nested structures are shown as parent→child connections with labeled edges
- Primitives (strings, numbers, booleans) are displayed as properties within their parent node
Why use a node graph? Unlike tree views that expand vertically, a node graph shows the entire structure spatially—revealing patterns, depth, and branching that are hard to see in raw JSON text.
Examples
{
"user": {
"name": "Alice",
"address": { "city": "NYC", "zip": "10001" }
}
}
→ 3 nodes: root → user → address{
"users": [
{ "name": "Alice", "role": "admin" },
{ "name": "Bob", "role": "editor" }
]
}
→ root → users (array) → [0], [1]{
"server": {
"database": {
"primary": { "host": "db1.example.com" },
"replica": { "host": "db2.example.com" }
}
}
}
→ 5 nodes showing server hierarchyFrequently Asked Questions
The JSON Visualizer shows a vertical tree view with expand/collapse controls—great for browsing. The Relationship Visualizer shows a spatial node graph with connections, giving you a bird's-eye view of the entire structure and its relationships.
Yes! Every node has a copy button in its header. Clicking it copies that node's complete JSON (including all children) to your clipboard, formatted with 2-space indentation.
Use pan (click and drag) and zoom (scroll wheel or ± buttons) to navigate. Click the fit-to-screen button to auto-center and zoom to fit the entire graph.
For best performance, arrays are limited to 6 visible child nodes, and objects show up to 14 properties. Truncated items show a "… N more" indicator. Very large JSON (1000+ nodes) may affect browser performance.
Yes! Click the "Hide Editor" button to collapse the editor panel. The visualization expands to fill the full width. Click "Show Editor" to bring it back.
Indigo/purple headers indicate objects (key-value pairs), while green headers indicate arrays (ordered lists). Property values inside nodes are color-coded by type: green for strings, amber for numbers, blue for booleans, purple for null.
Absolutely. Everything runs 100% client-side in your browser. No data is ever sent to any server.