JSON Visualiser

A beautiful and intuitive VS Code extension to visualize JSON data with interactive tree and graph views.

✨ Features

🌳 Tree View

• Collapsible/expandable hierarchical structure
• Color-coded values by type (matches graph colors)
• One-click copy: Copy any value instantly
• Search across keys, values, and paths
• Expand/collapse all functionality

📊 Interactive Graph View

• Visual node-based representation with beautiful gradients
• Color-coded nodes by data type:
  • 🟣 Purple: Objects
  • 🔵 Blue: Arrays
  • 🟢 Green: Strings
  • 🟠 Orange: Numbers
  • 🔴 Pink: Booleans
  • ⚪ Gray: Null values
• Zoom, pan, and navigate with ease
• Minimap for large JSON files
• Reset view button to recenter
• Click any node to copy its value

💎 Smart Features

• Copy actual values, not paths:
  • Strings: "Search functionality"
  • Numbers: 42
  • Objects/Arrays: Pretty-printed JSON
• Dynamic node sizing: Nodes resize based on content length
• Vibrant colors: Consistent color scheme across both views
• Professional icons: Lucide icons throughout
• Dark/Light theme support: Adapts to your VS Code theme

🚀 Usage

Opening the Visualiser

1. Keyboard Shortcut:

   • Windows/Linux: Ctrl+Shift+J
   • macOS: Cmd+Shift+J

2. Command Palette:

   • Press Ctrl+Shift+P (or Cmd+Shift+P on Mac)
   • Type "Visualise JSON"
   • Press Enter

Switching Views

Use the view toggle buttons at the top:

• 🌲 Tree: Traditional hierarchical view
• 🕸️ Graph: Interactive node visualization

Copying Values

Simply click on any node or value - it's automatically copied to your clipboard!

Keyboard Shortcuts

Commands

• Visualise JSON - Open the visualiser panel
• Refresh JSON Visualiser - Refresh the current view

Installation

From Source

1. Clone this repository
2. Run npm install in the root directory
3. Run cd webview && npm install to install webview dependencies
4. Run npm run compile to build the extension
5. Run cd webview && npm run build to build the webview
6. Press F5 in VS Code to launch the extension in debug mode

Requirements

• VS Code version 1.85.0 or higher

Extension Settings

This extension doesn't add any VS Code settings.

🎯 Why Use JSON Visualiser?

For Developers

• Debug API responses: Quickly understand complex JSON structures
• Extract values: One-click copy instead of manual selection
• Navigate large files: Visual graph helps see relationships

For Data Engineers

• Analyze JSON exports: Visualize data hierarchies
• Explore schemas: Understand data structure at a glance

For DevOps/SRE

• Inspect configs: Quickly find configuration values
• Copy connection strings: Click to copy, paste into kubectl

Known Issues

None currently! Please report issues on the GitHub repository.

📝 Release Notes

1.0.0

Initial release with:

• Tree view with collapsible nodes
• Interactive graph visualization with vibrant gradients
• Search and filter functionality
• Copy actual values (not paths) on click
• Dynamic node sizing based on content
• Vibrant color scheme matching across views
• Dark/light theme support
• Reset view functionality
• Professional Lucide icons throughout

Development

Building

# Install dependencies
npm install
cd webview && npm install

# Build extension
npm run compile

# Build webview
cd webview && npm run build

# Watch mode (development)
npm run watch

Project Structure

json-visualiser/
├── src/
│   ├── extension.ts              # Extension entry point
│   └── JsonVisualiserPanel.ts    # Webview panel controller
├── webview/
│   └── src/
│       ├── App.tsx               # Main React component
│       ├── components/           # React components
│       │   ├── TreeView.tsx      # Tree visualization
│       │   ├── GraphView.tsx     # Graph visualization
│       │   ├── SearchBar.tsx     # Search and controls
│       │   └── CustomNode.tsx    # Custom graph node
│       └── utils/                # Utilities
│           ├── parseJson.ts      # JSON parsing logic
│           └── buildGraph.ts     # Graph building logic
├── package.json                  # Extension manifest
└── README.md

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT

Enjoy visualizing your JSON data! 🎉