JSON Editor v1.4.0

JSON Editor - v1.4.0

Offline JSON editor with multiple visualisation types and real-time validation.

Installation

1. Download json-editor-v1.4.0.zip
2. Extract the archive
3. Open index.html in your browser

What's New

☀️ Sunburst Diagram Visualisation

A beautiful circular visualisation perfect for exploring deeply nested JSON structures. Like a tree from the centre outward!

Key Features

• Concentric Rings: Each ring = one depth level in your JSON hierarchy
• Proportional Arcs: Arc sizes show relative element sizes
• Depth Gradient: Colours automatically lighten as depth increases for visual clarity
• Drag & Zoom: Click-drag to pan, scroll to zoom in/out
• Smart Labels: Only shows text on segments large enough to read
• Rich Tooltips: Hover for full path and values
• Type Colours: Different base colours for objects (blue), arrays (purple), strings (orange), numbers (green), booleans (cyan), nulls (grey)

Perfect For

• 🌲 Deeply nested structures (5+ levels)
• 📊 Complex configuration files
• 🗂️ Hierarchical data exploration
• 📐 Space-efficient visualisation

How to Use

1. Select "Sunburst" from the visualisation dropdown
2. Drag to pan, scroll to zoom
3. Hover segments for tooltips
4. Click segments to log path to console

🎨 Visualisation Options

The editor now supports 5 visualisation types:

1. Graph View (hierarchical tree)
2. Force-Directed Graph (physics simulation)
3. Treemap (space-filling blocks)
4. Sunburst (circular hierarchy) ✨ (NEW)
5. Table View (for arrays of objects)

Technical Details

• Class: D3SunburstVisualiser
• Layout: D3.js partition layout
• Dependencies: D3.js v7 (loaded from CDN)
• Custom Features: Depth-based colour gradient algorithm
• Performance: Efficient for complex hierarchies

Bug Fixes

• Fixed method naming consistency (visualize vs visualise)

Previous Releases

• v1.3.0: Table View visualisation
• v1.2.0: Drag-to-pan canvas
• v1.1.0: JSON folding/collapsing
• v1.0.0: Initial release

Full Changelog: v1.3.0...v1.4.0