Result - Downloaded Image

---------------...............------------------------------------------

Result - Live

---

JSON Tree Visualizer

A powerful web application that visualizes JSON data as an interactive hierarchical tree with advanced features for exploration and analysis.

Features

Core Functionality

• JSON Input & Validation: Paste or type JSON with real-time validation and error messages
• Interactive Tree Visualization: Color-coded nodes representing objects (blue), arrays (green), and primitives (orange)
• Search with JSON Path: Search for nodes using keys or JSON path notation (e.g., config.theme)
• Click-to-Copy Paths: Click any node to copy its JSON path to clipboard

Visualization Controls

• Zoom & Pan: Navigate large JSON structures with smooth zoom and pan controls
• Fit View: Automatically adjust viewport to fit entire tree
• Mini Map: Overview map for quick navigation in complex structures
• Dark/Light Mode: Toggle between dark and light themes

Export & Utilities

• Download as PNG: Export the entire tree visualization as an image
• Sample JSON: Load pre-configured sample data for quick testing
• Clear Function: Reset visualization and start fresh

Getting Started

1. Install dependencies:

npm install

2. Run the development server:

npm run dev

3. Open in browser: Navigate to http://localhost:3000

How to Use

Basic Usage

1. Enter JSON Data

   • Paste your JSON into the input area
   • Or click "Load Sample" to see example data
   • Click "Visualize" to generate the tree

2. Explore the Tree

   • Drag to pan around the visualization
   • Use mouse wheel or zoom controls to zoom in/out
   • Click the "Fit View" button to see the entire tree

3. Search for Nodes

   • Type keys or paths in the search bar (e.g., "name" or "config.settings")
   • Matching nodes will be highlighted with yellow borders
   • Match count is displayed below the search bar

4. Copy JSON Paths

   • Click any node to copy its JSON path
   • A confirmation message shows the copied path
   • Use these paths to reference specific data locations

Advanced Features

Color Coding:

• Blue nodes: Objects {}
• Green nodes: Arrays []
• Orange nodes: Primitive values (strings, numbers, booleans)

Search Tips:

• Search by key name: "name"
• Search by nested path: "config.theme"
• Search by array index: "features[0]"
• Search is case-insensitive

Theme Toggle:

• Click the sun/moon icon to switch between light and dark modes
• The entire interface adapts to your preferred theme

Export:

• Click the download icon to save the visualization as PNG
• Perfect for documentation or sharing with team members

Technical Details

Built with:

• Next.js 13 (App Router)
• React Flow - Interactive node-based graph library
• Tailwind CSS - Styling and responsive design
• html-to-image - PNG export functionality
• Lucide React - Icon components

Key Components:

• JsonInput.js - JSON input with validation
• TreeVisualization.js - Main visualization component with React Flow
• jsonTreeUtils.js - JSON parsing and tree generation utilities

Features:

• Real-time JSON validation
• Automatic tree layout algorithm
• Debounced search for performance
• Responsive grid layout
• Clipboard API integration

Browser Support

Works in all modern browsers that support:

• ES6+ JavaScript
• CSS Grid
• Clipboard API
• Canvas (for PNG export)

Example JSON Structures

Try these example structures:

Simple Object:

{
  "name": "John Doe",
  "age": 30,
  "active": true
}

Nested Structure:

{
  "user": {
    "profile": {
      "name": "Jane",
      "settings": {
        "theme": "dark",
        "notifications": true
      }
    }
  }
}

With Arrays:

{
  "products": [
    {"id": 1, "name": "Widget"},
    {"id": 2, "name": "Gadget"}
  ]
}

Keyboard Shortcuts

• Ctrl/Cmd + Mouse Wheel - Zoom in/out
• Click + Drag - Pan the canvas
• Click Node - Copy JSON path

Tips

• Start with the sample JSON to understand the interface
• Use search to quickly locate specific keys in large JSON files
• Export visualizations to document your data structures
• Toggle dark mode for comfortable viewing in different lighting conditions
• The mini-map is especially useful for navigating complex nested structures

Troubleshooting

Invalid JSON Error:

• Check for missing commas, quotes, or brackets
• Use a JSON validator to identify syntax errors
• Ensure strings are properly quoted

Tree Not Displaying:

• Make sure you clicked "Visualize" after entering JSON
• Try the "Fit View" button if the tree is off-screen
• Clear and reload if the visualization seems stuck

Performance with Large JSON:

• Very large JSON files (>1000 nodes) may render slowly
• Consider simplifying your JSON structure
• Use search to focus on specific sections