Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>JSON treeNew to Visual Studio Code? Get it now.
JSON tree

JSON tree

Lou Alcala

|
797 installs
| (0) | Free
Effortlessly visualize JSON structures as dynamic tree diagrams
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

JSON Tree Visualizer

🌟 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

  1. Open a JSON File:

    Open a file with valid JSON content in Visual Studio Code.

  2. Run the Command:

    Press Ctrl+Shift+P (or Cmd+Shift+P on macOS). Search for Visualize JSON as Tree and run the command.

  3. Use the JSON Input:

    Paste JSON directly into the input field in the Webview panel. Click Generate Tree to create the visualization.

  4. View the Tree:

    The tree SVG will appear in the Webview panel.

🧩 Installation

  1. Open the Extensions view in Visual Studio Code (Ctrl+Shift+X or Cmd+Shift+X).
  2. Search for JSON Tree Visualizer in the Marketplace.
  3. Click Install.
  4. Done! Run the command from the command palette.

🚀 Author

Lou

GitHub • Website

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft