JSON Editor v1.6.3

JSON Editor - v1.6.3

Offline JSON editor with syntax highlighting, graph visualisation, and JSON Schema validation.

Installation

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

What's New

⚡ Performance Improvements for Large Files

This release focuses on preventing browser crashes when working with large JSON files:

Deferred Import Processing

• Files larger than 10KB now use staggered loading
• Line numbers, syntax highlighting, and visualisation updates are deferred using setTimeout
• Prevents the browser from becoming unresponsive during import

Reduced Visualisation Limits

• Maximum nodes reduced from 500 to 300 across all visualisers
• Maximum depth reduced from 20 to 15 to prevent stack overflow
• Visualisation auto-disabled for files larger than 50KB (previously 100KB)

Technical Details

• Import handler now detects large files (>10KB) and defers heavy operations
• Line numbers update deferred by 50ms
• Syntax highlighting deferred by 100ms
• Validation and visualisation deferred by 200ms
• All four visualiser classes (Tree, Force-Directed, Treemap, Sunburst) now share consistent limits

Full Changelog: v1.6.2...v1.6.3

---

🤖 Generated with Claude Code

JSON Editor v1.6.2

JSON Editor - v1.6.2

Offline JSON editor with syntax highlighting, graph visualisation, and JSON Schema validation.

Installation

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

What's New

✨ Word Wrap Toggle

Added a new "Wrap: On/Off" button to toggle word wrap in the editor:

• Wrap On (default): Long lines wrap to fit the editor width
• Wrap Off: Lines extend horizontally with a scrollbar
• Preference is saved to localStorage

🐛 Bug Fixes

Editor Scrollbar Fix
Fixed the vertical scrollbar not appearing in the editor panel:

• Scrollbar now displays correctly within the editor bounds
• Text and syntax highlighting properly aligned with scrollbar gutter

Technical Details

• Textarea and syntax-highlight use calc() widths for precise sizing
• Added box-sizing: border-box for consistent layout
• Syntax-highlight width accounts for 17px scrollbar gutter
• Changed overflow-y: scroll for always-visible scrollbar track

Full Changelog: v1.6.1...v1.6.2

---

🤖 Generated with Claude Code

JSON Editor v1.6.1

JSON Editor - v1.6.1

Offline JSON editor with syntax highlighting, real-time validation, and graph visualisation.

Installation

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

What's New

🐛 Browser Crash Fix for Large JSON Documents

Fixed a critical issue where Microsoft Edge would crash when loading JSON documents around 14KB or larger.

⚡ Performance Improvements

Event Delegation

• Replaced individual fold icon listeners with event delegation
• Prevents memory leaks from listener accumulation on every editor update

Debounced Updates
Added debouncing to expensive DOM operations:

• Line number updates: 100ms debounce
• Syntax highlighting: 50ms debounce
• Prevents excessive re-rendering during rapid typing

Visualiser Safety Limits
Added safety limits to all graph visualisers to prevent browser crashes:

Visualiser	MAX_NODES	MAX_DEPTH
GraphVisualizer	500	20
D3ForceGraphVisualizer	500	20
D3TreemapVisualizer	500	20
D3SunburstVisualiser	500	20

When limits are exceeded, a warning indicator (⚠️ Limited to 500 nodes) is displayed instead of attempting to render all nodes.

Technical Details

• Memory Management: Single delegated event listener instead of per-icon listeners
• Input Performance: Debounced handlers prevent UI lag during typing
• Graph Safety: Recursive traversal now checks depth and node count limits
• Graceful Degradation: Large documents render partially with clear warning

Full Changelog: v1.6.0...v1.6.1

---

🤖 Generated with Claude Code

JSON Editor v1.6.0

JSON Editor - v1.6.0

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

Installation

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

What's New

📋 Copy/Paste Support for Collapsed Nodes

Properly duplicate and reuse collapsed JSON structures with full data preservation.

Key Features

• Smart Copy: Copying a collapsed node ({...} or [...]) copies the full expanded content
• Valid Paste: Pasted content is always valid JSON - no more broken structures
• Cut Support: Cut operations also preserve and transfer full content
• Transparent: Works automatically - no extra steps required

How to Use

1. Collapse any object or array using the fold icon (▾ → ▸)
2. Select the collapsed line (e.g., "settings": {...},)
3. Copy with Ctrl+C (or Cmd+C on Mac)
4. Paste anywhere - full expanded content appears!

Example Workflow

// Start with collapsed node:
"settings": {...},

// Copy and paste - you get the FULL content:
"settings": {
  "theme": "dark",
  "autoSave": true,
  "offline": true
},

Perfect For

• 🔄 Duplicating complex nested structures
• 📝 Creating templates from existing data
• ⚡ Quick JSON scaffolding

🛠️ DevContainer Improvements

More reliable development environment setup.

Improvements

• Auto-restart: HTTP server now starts on every reconnection
• Better Process Management: Improved startup script reliability
• Survives Sessions: Server persists through shell changes

Technical Details

• Implementation: Copy/cut event handlers intercept clipboard operations
• Data Integrity: Collapsed regions tracked with original content in memory
• Validation: Always uses full expanded content for JSON validation
• Export: Format and export operations work with complete data

Previous Releases

• v1.5.0: Resizable panes with draggable divider
• v1.4.1: Visualisation padding fixes
• v1.4.0: Sunburst diagram visualisation
• 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.5.0...v1.6.0

---

🤖 Generated with Claude Code

JSON Editor v1.5.0

JSON Editor - v1.5.0

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

Installation

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

What's New

🎛️ Resizable Panes

Take full control of your workspace! You can now dynamically resize the editor and visualisation panes to suit your workflow.

Key Features

• Draggable Divider: Click and drag the 4px handle between panes to adjust sizes
• Visual Feedback: Divider highlights in cyan when hovering or dragging
• Smart Constraints: Minimum 20% / maximum 80% prevents panes from becoming too small
• Smooth Integration: Works seamlessly with existing show/hide panel buttons
• Auto-hide: Divider disappears when either panel is hidden
• Live Updates: Visualisations automatically redraw after resizing

How to Use

1. Hover over the thin divider between editor and visualisation panes
2. When it highlights in cyan, click and drag left or right
3. Release to set your preferred layout
4. Use toggle buttons (◀/▶) to show/hide panels as before

Perfect For

• 📝 Focusing on editing: Make editor larger, visualisation smaller
• 🎨 Examining visualisations: Maximise visualisation space
• ⚖️ Balanced workflow: Keep both panes visible at your preferred ratio

Bug Fixes

• Fixed panel width issue when using hide/show toggle buttons
• Panels now properly expand to full width when other panel is hidden

Technical Details

• Implementation: Pure CSS and vanilla JavaScript resize handling
• Performance: Debounced visualisation updates on resize complete
• Compatibility: Works with all existing panel toggle functionality
• Browser Support: Modern browsers with ES6 support

Previous Releases

• v1.4.1: Visualisation padding fixes
• v1.4.0: Sunburst diagram visualisation
• 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.4.1...v1.5.0

---

🤖 Generated with Claude Code

JSON Editor v1.4.1

JSON Editor - v1.4.1

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

Installation

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

What's New

🔧 Visualisation Rendering Improvements

This patch release focuses on fixing rendering and layout issues across all D3-based visualisations.

Bug Fixes

🐛 Fixed Visualisation Padding and Positioning

• Removed unwanted padding that created dead zones at edges of visualisations
• Fixed SVG positioning for Force-Directed, Treemap, and Sunburst views
• Eliminated blank spaces at top and bottom of viewport
• Improved initial load rendering - no more temporary blank areas when first switching visualisations

📐 Dimension Calculation Fixes

• Force-Directed Graph: Now uses actual viewport dimensions instead of wrapper constraints
• Treemap: Fixed container reference for proper sizing
• Sunburst: Completely eliminated clipping issues at all edges
• All visualisations now consistently fill the entire available space

Technical Details

• Changed dimension source from #graph-wrapper (600px min-height) to #visualization-container (actual viewport)
• Updated SVG positioning from offset to top: 0; left: 0
• Removed hardcoded padding adjustments

Features (from v1.4.0)

☀️ Sunburst Diagram Visualisation

A beautiful circular visualisation perfect for exploring deeply nested JSON structures.

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

🎨 Visualisation Options

The editor supports 5 visualisation types:

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

Previous Releases

• v1.4.0: Sunburst diagram visualisation
• 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.4.0...v1.4.1

---

🤖 Generated with Claude Code

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

JSON Editor v1.3.0

JSON Editor - v1.3.0

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

Installation

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

What's New

📊 Table View Visualisation

A new visualisation type specifically designed for viewing array-based JSON data in a familiar spreadsheet-like format. Perfect for API responses, database exports, and data collections.

Key Features

• Smart Detection: Automatically recognises when JSON contains an array of objects
• Dynamic Columns: Auto-generates table columns from all unique object keys
• Click-to-Sort: Click any column header to sort ascending (▲) or descending (▼)
• Live Search: Real-time filtering across all fields as you type
• Row Counter: Shows "X of Y rows" based on current filter
• Type Colouring: Different colours for numbers (green), booleans (blue), nulls (grey), and objects (orange)
• Nested Data: Displays nested objects as {3 keys} or arrays as [5 items] - click to view full JSON
• CSV Export: "Copy as CSV" button exports filtered data to clipboard
• Sticky Controls: Header and search controls remain visible when scrolling

Sample Data
Two sample JSON files included for testing:

• sample-data.json - 12 employee records with varied data types
• test-table-data.json - 5 employee records for quick testing

🎨 Visualisation Options

The editor now supports 4 visualisation types:

1. Graph View (original hierarchical tree)
2. Force-Directed Graph (D3.js physics simulation)
3. Treemap (hierarchical space-filling)
4. Table View - for array data (NEW)

Switch between them using the dropdown in the visualisation panel header.

Technical Details

• Class: TableViewVisualizer
• No Dependencies: Pure HTML/CSS/JavaScript
• Fully Offline: No external resources required
• Smart Tooltips: Hover over cells to see full values
• Responsive: Efficient rendering for hundreds of rows

Bug Fixes

• Table view shows helpful message when JSON structure is incompatible (e.g., single objects instead of arrays)

Previous Releases

• v1.2.0: Drag-to-pan canvas with fixed zoom controls
• v1.1.0: JSON folding/collapsing feature
• v1.0.0: Initial release

Full Changelog: v1.2.0...v1.3.0

JSON Editor v1.2.0

JSON Editor - v1.2.0

Offline JSON editor with syntax highlighting, real-time validation, and graph visualisation.

Installation

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

What's New

🖱️ Drag-to-Pan Canvas

• Click and Drag: Click anywhere on the visualisation canvas and drag to move it around
• Grab Cursor: Cursor changes to an open hand (grab) when hovering, and a closed hand (grabbing) when dragging
• Smooth Panning: Scroll-based panning for smooth, responsive movement
• Large Canvas Support: Perfect for navigating large JSON structures with many nodes

🎯 Smart Interactions

• No Conflicts: Dragging the canvas doesn't interfere with:
  • Dragging individual nodes to reposition them
  • Clicking zoom controls (+, -, reset)
  • Other UI interactions
• Intelligent Detection: Automatically detects when you're interacting with nodes or controls

📌 Fixed Zoom Controls

• Sticky Positioning: Zoom controls now stay visible in the top-right corner
• Always Accessible: Controls remain in place even when panning the canvas
• No More Scrolling: Previously, zoom controls would move with the canvas - now they're fixed

🔧 Technical Improvements

• Restructured visualisation DOM with wrapper div for better SVG rendering
• SVG edges and nodes now scroll together perfectly
• Improved edge alignment when panning
• Better container sizing logic

Bug Fixes

• Fixed zoom controls moving when dragging canvas
• Fixed SVG edge alignment issues during panning
• Fixed edge visibility after DOM restructuring

Previous Releases

• v1.1.0: JSON folding/collapsing feature
• v1.0.0: Initial release with offline JSON editing, syntax highlighting, validation, and graph visualisation

Full Changelog: v1.1.0...v1.2.0

JSON Editor v1.1.0

JSON Editor - v1.1.0

Offline JSON editor with syntax highlighting, real-time validation, and graph visualisation.

Installation

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

What's New

🎉 JSON Folding Feature

• Fold/Unfold Code Sections: Click the ▾/▸ icons next to objects and arrays to collapse or expand them
• Visual Indicators: Large, bold fold icons (14px) with hover effects for better visibility
• Smart Placeholders: Folded regions display {...} or [...] to show what's hidden
• Nested Support: Fold nested objects and arrays independently
• Clean Interface: Line numbers and syntax highlighting automatically adapt to folded state

🐛 Bug Fixes

• Fixed fold icon placement for nested regions
• Fixed HTML rendering in folded placeholders
• Improved line number visibility for folded content

🎨 UI Improvements

• Panel toggle buttons now prevent both panels from being hidden simultaneously
• Increased fold icon size and contrast for better visibility

Previous Releases

• v1.0.0: Initial release with offline JSON editing, syntax highlighting, validation, and graph visualisation