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

Source: Dev.to

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.

Solution: JSON Diagram Viewer

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

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 (e.g., users[0].profile.settings) or value.

Installation

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

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.

Technical Details

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

Links

• VS Code Marketplace
• GitHub (MIT licensed, contributions welcome!)