Skip to content

Visualize JSON as interactive node graphs inside VS Code. Paste JSON or fetch from APIs and explore complex data structures visually.

License

Notifications You must be signed in to change notification settings

RatneshDesign/Json-Graph-Viewer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

JSON Graph Viewer

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.


✨ Features

  • 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

🚀 How to Use

  1. Open Command Palette:

    Ctrl + Shift + P

  2. Run the command:

    JSON Visualizer: Open

  3. Paste your JSON data.

  4. Instantly see the visual graph.


📦 Installation

From VSIX (Manual Install)

  1. Download the .vsix file from Releases\
  2. Open VS Code\
  3. Go to Extensions panel\
  4. Click ... → Install from VSIX\
  5. Select the file

📂 Project Structure

src/ ├── extension.js └── webview/ └── getWebviewContent.js

media/ └── logo.png


🧠 Use Cases

  • Debug API responses\
  • Understand nested JSON\
  • Visualize configuration files\
  • Learn data structures\
  • Teaching & demos

📜 License

MIT License --- feel free to use.


❤️ Author

Created by Ratnesh Kumawat (RatneshDesign)

If you like this project, consider giving it a ⭐ on GitHub!

About

Visualize JSON as interactive node graphs inside VS Code. Paste JSON or fetch from APIs and explore complex data structures visually.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published