I Built a VS Code Extension to Visualize JSON as Tree Diagrams

The Problem

We've all been there. You're debugging an API response, staring at a 500-line JSON file, hunting for that one nested field buried three levels deep. You're mentally matching brackets, losing your place, scrolling up and down.

{
  "users": [
    {
      "id": 1,
      "profile": {
        "settings": {
          "notifications": {
            "email": {
              "frequency": "weekly"  // <- Where is this thing?!
            }
          }
        }
      }
    }
  ]
}

I got tired of this. So I built JSON Diagram Viewer.

The Solution

One click transforms your JSON into an interactive, collapsible tree diagram right inside VS Code. No more bracket matching. No more getting lost.

Key Features

Live Sync - Edit your JSON, watch the diagram update in real-time. No refresh needed.

Color-Coded Cards - Objects, arrays, and primitives each have distinct colors so you can scan the structure at a glance.

Collapsible Nodes - Click to expand/collapse any section. Focus on what matters.

Copy Path & Values - Right-click any node to copy its JSON path (users[0].profile.settings) or value.

How to Use It

1. Install from the VS Code Marketplace
2. Open any .json file
3. Right-click → View as Diagram

That's it. The diagram opens side-by-side with your editor.

Use Cases

• API Development - Visualize responses from REST/GraphQL endpoints
• Config Files - Navigate package.json, tsconfig.json, or any complex config
• Data Analysis - Explore JSON datasets before processing
• Debugging - Understand nested state objects in React/Vue devtools exports

Built With

• TypeScript
• VS Code Webview API
• Vanilla JS for the diagram rendering (no heavy dependencies)

Try It Out

👉 VS Code Marketplace

👉 GitHub (MIT licensed, contributions welcome!)

---

What JSON visualization pain points do you have? Let me know in the comments!