🚀 JSON Graph Explorer

Transform your JSON data into stunning, interactive graph visualizations directly in VS Code!

📥 Install Now • 📖 Documentation • 🐛 Report Issues • 💡 Feature Requests

✨ Why JSON Graph Explorer?

JSON Graph Explorer revolutionizes how developers work with JSON data. Instead of scrolling through endless nested objects and arrays, visualize your data as beautiful, interactive graphs that make complex relationships instantly clear.

Perfect for:

• 🔍 API Response Analysis - Understand complex API responses at a glance
• 📊 Data Structure Exploration - Navigate large JSON files effortlessly
• 🐛 Debugging - Spot data inconsistencies and structural issues quickly
• 📚 Documentation - Generate visual representations for APIs and data models
• 🎓 Learning - Teach and understand JSON structure visually

🚀 Quick Start

Installation

1. Open VS Code
2. Extensions Sidebar → Search "JSON Graph Explorer"
3. Click Install and reload VS Code

Usage

1. Open any .json file in VS Code
2. Right-click in the editor → "Open JSON Graph Explorer"
3. Explore! Zoom, pan, expand/collapse nodes interactively

🎯 Key Features

📊 Interactive Visualization

• Dynamic Graph Rendering - Real-time visualization of JSON structures
• Zoom & Pan Controls - Navigate large datasets with ease
• Node Expansion - Drill down into nested objects and arrays
• Responsive Design - Adapts to your VS Code theme

🎨 Smart Rendering

• Color-Coded Nodes - Objects, arrays, primitives visually distinguished
• Relationship Lines - Clear parent-child connections
• Type Indicators - Instant recognition of data types
• Collapsible Sections - Focus on relevant data only

🔧 Developer Experience

• Context Menu Integration - One-click access from JSON files
• Command Palette Support - Keyboard-driven workflow
• Error Handling - Graceful handling of malformed JSON
• Performance Optimized - Smooth experience with large files

🎛️ Advanced Controls

• Search & Filter - Find specific nodes quickly
• Export Options - Save visualizations as images
• Theme Support - Matches your VS Code theme
• Keyboard Shortcuts - Power user shortcuts

📋 Requirements

• VS Code: ^1.70.0
• Node.js: ^14.0.0 (for development)
• Operating System: Windows, macOS, Linux

🛠 Commands & Shortcuts

Keyboard Shortcuts:

• Ctrl+Shift+P → Search "JSON Graph Explorer"
• Ctrl+Click → Expand/collapse nodes
• Mouse Wheel → Zoom in/out

📖 Documentation

Basic Usage

{
  "users": [
    {"name": "Alice", "role": "admin"},
    {"name": "Bob", "role": "user"}
  ],
  "settings": {
    "theme": "dark",
    "notifications": true
  }
}

Right-click → Open JSON Graph Explorer → Explore the structure!

Advanced Features

• Large Files: Automatically paginates for performance
• Circular References: Detected and highlighted
• Custom Themes: Supports VS Code theme colors
• Export Formats: PNG, SVG support planned

API Integration

The extension provides a programmatic API for advanced users:

// Access the visualization programmatically
const api = vscode.extensions.getExtension('codewithevilxd.json-graph-explorer')?.exports;
api?.visualize(jsonData, options);

🔧 Configuration

Access settings via Ctrl+, → Search "JSON Graph Explorer"

🚧 Roadmap

Version 1.1.0

• [ ] Multiple File Comparison - Compare two JSON files side-by-side
• [ ] Search & Highlight - Find and highlight specific values
• [ ] Export Formats - SVG, PDF export options

Version 1.2.0

• [ ] Schema Validation - JSON Schema validation with visual feedback
• [ ] Path Navigation - Click-to-copy JSON paths
• [ ] Performance Mode - Ultra-fast rendering for massive files

Future Versions

• [ ] Collaboration Features - Share visualizations with team
• [ ] Custom Styling - User-defined color schemes
• [ ] Integration APIs - REST API for external tools

🤝 Contributing

We welcome contributions! Here's how to get started:

Development Setup

git clone https://github.com/codewithevilxd/json-graph-explorer.git
cd json-graph-explorer
npm install
npm run watch
# Open in VS Code, press F5 to debug

Guidelines

• Issues: Report bugs or request features
• Code: Follow TypeScript best practices
• Tests: Add tests for new features
• Documentation: Update README for changes

Building

npm run package  # Production build
npm run compile  # Development build
npm test         # Run test suite

📊 Performance

• File Size Limit: Handles JSON files up to 10MB efficiently
• Node Limit: Default 1000 nodes (configurable)
• Rendering: WebGL-accelerated for smooth interactions
• Memory: Optimized memory usage for large datasets

🐛 Troubleshooting

Common Issues

Extension not appearing?

• Reload VS Code: Ctrl+Shift+P → "Developer: Reload Window"

Graph not rendering?

• Check JSON syntax: Use VS Code's built-in JSON validation
• File size: Reduce file size or increase maxNodes setting

Performance issues?

• Disable animations in settings
• Reduce maxNodes limit
• Use Performance Mode (planned)

Debug Mode

Enable debug logging:

{
  "jsonGraphExplorer.debug": true
}

Check VS Code's developer console for logs.

📄 License

MIT License - see LICENSE file for details.

Copyright © 2026 Raj Dev. Built with ❤️ for the developer community.

🙏 Acknowledgments

• VS Code Extension API - For the amazing platform
• D3.js Community - Inspiration for graph visualization techniques
• Open Source Community - For tools and libraries that made this possible

📞 Support

• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Email: For sensitive matters, reach out privately