Skip to content

JSON Editor v1.3.0

Choose a tag to compare

View all tags
@JayVDZ JayVDZ released this 27 Nov 21:11
· 35 commits to main since this release
v1.3.0
2db938b

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

Assets 3
Loading