JSON Visualizer
DiagramsVisualize any JSON as an interactive card graph or a UML class diagram. Collapse branches, search keys/values with live highlighting, copy JSONPath expressions, generate typed classes in 9 languages, and export as SVG or PNG.
JSONjson
Loading editor…
About JSON Visualizer
Two visualisations in one tool — toggle between a card-based interactive node graph and a UML class diagram with 9-language code generation. In Graph view, every object and array becomes a collapsible card connected by bezier edges; search across all keys and values in real time, copy full JSONPath expressions, and export the diagram as SVG or PNG. Switch to UML view to see the JSON structure rendered as a class diagram with inferred types, then flip to Code view to generate ready-to-use class definitions in TypeScript, Python, C#, Go, Rust, Kotlin, Java, Swift, or Dart.
Features
- ✓Graph tab: card-based node graph with bezier edges connecting parent and child nodes
- ✓Collapsible/expandable branches at any nesting depth
- ✓Real-time search with live highlighting across all keys and values
- ✓Active-match navigation (prev/next) with auto-scroll to the focused card
- ✓Full JSONPath expression displayed on click for any node or field value
- ✓One-click copy of any node's JSONPath to the clipboard
- ✓Left-to-right and top-down layout modes
- ✓Zoom, pan, and fit-to-content controls; Ctrl+scroll to zoom
- ✓Export the graph as SVG or PNG
- ✓Color-coded value types: string, number, boolean, null, array, object
- ✓UML tab: class diagram generated from the JSON structure with inferred property types
- ✓Diagram sub-mode: interactive SVG class diagram with SVG and PNG export
- ✓Code sub-mode: generated class source code per language with one-click copy and download
- ✓9 target languages: TypeScript, Python, C#, Go, Rust, Kotlin, Java, Swift, Dart
- ✓Live update — both views re-render automatically as you edit the JSON input
Common Use Cases
- Debugging deeply nested API responses by tracing the graph structure visually
- Understanding unfamiliar JSON configurations from third-party services
- Locating the exact JSONPath to a value for use in JavaScript, Python, or jq
- Scaffolding typed model classes from a JSON API response in any of 9 languages
- Generating UML class diagrams for technical documentation from JSON examples
- Auditing large JSON exports for missing or unexpected fields
- Teaching or documenting JSON data structures with both graph and class-diagram perspectives
Frequently Asked Questions
QWhat is the difference between Graph view and UML view?
Graph view renders the JSON as an interactive card graph where each object/array is a collapsible node — ideal for exploring structure and copying JSONPath expressions. UML view renders the same JSON as a class diagram with inferred property types, and lets you generate class source code in 9 programming languages.
QWhich languages does the UML code generator support?
TypeScript, Python, C# (.NET), Go, Rust, Kotlin, Java, Swift, and Dart. Switch between them using the language selector in the UML tab's Code sub-mode, then copy or download the generated file.
QHow large can the JSON input be?
The graph renders up to 15 array items and 20 object keys per card before truncating with a '+N more' indicator, keeping performance snappy even for large payloads. The UML view handles deeply nested schemas without truncation.
QHow does the JSONPath copy feature work?
Clicking any card header or row value in Graph view shows a JSONPath expression (e.g. `$.user.orders[1].price`) in a toast at the bottom of the graph. Hit the copy button to grab it.
QCan I search by value as well as key?
Yes. The search box in Graph view matches against both key names and scalar values. All matches are highlighted in yellow; the currently focused match is highlighted in orange and the view auto-scrolls to it.
QIs the JSON validated before rendering?
Yes. Invalid JSON displays a descriptive parse error so you can fix the issue before re-rendering either view.