🌟 Visualize JSON as an Interactive Tree in Visual Studio Code
JSON Tree Visualizer is a Visual Studio Code extension that allows you to visualize JSON structures as an interactive tree directly in the editor. Perfect for developers working with complex JSON data who want a clear visual representation.
You can try it live in JSONtr.ee or check the open source repository here
📦 Features
🎨 Generates a tree SVG from any JSON file.
🖋️ Supports copy-pasting JSON directly into an input field.
🌑 Compatible with VS Code's light and dark themes.
🔍 Handles large JSON files with complex structures.
🚀 Easy to use: Select or paste JSON content and generate the tree with a click.
🛠️ How to Use
Open a JSON File:
Open a file with valid JSON content in Visual Studio Code.
Run the Command:
Press Ctrl+Shift+P (or Cmd+Shift+P on macOS).
Search for Visualize JSON as Tree and run the command.
Use the JSON Input:
Paste JSON directly into the input field in the Webview panel.
Click Generate Tree to create the visualization.
View the Tree:
The tree SVG will appear in the Webview panel.
🧩 Installation
Open the Extensions view in Visual Studio Code (Ctrl+Shift+X or Cmd+Shift+X).
Search for JSON Tree Visualizer in the Marketplace.