Visualize JSON data as interactive node graphs directly inside VS Code.
JSON Graph Viewer helps developers understand complex JSON structures by converting them into an intuitive visual flow of connected nodes.
- Paste raw JSON and instantly visualize it\
- Interactive node-based graph view\
- Clean and developer-friendly UI\
- Supports deeply nested JSON objects\
- Lightweight and fast\
- Runs entirely inside VS Code WebView
-
Open Command Palette:
Ctrl + Shift + P
-
Run the command:
JSON Visualizer: Open
-
Paste your JSON data.
-
Instantly see the visual graph.
- Download the
.vsixfile from Releases\ - Open VS Code\
- Go to Extensions panel\
- Click ... → Install from VSIX\
- Select the file
src/ ├── extension.js └── webview/ └── getWebviewContent.js
media/ └── logo.png
- Debug API responses\
- Understand nested JSON\
- Visualize configuration files\
- Learn data structures\
- Teaching & demos
MIT License --- feel free to use.
Created by Ratnesh Kumawat (RatneshDesign)
If you like this project, consider giving it a ⭐ on GitHub!