JSON Diff Online Docs — AST Diffing, Multi-Stream Matrix & Patch Specs

[01] Overview

JSON Diff PRO is a next-generation, 100% in-browser structural and line comparison platform engineered for software engineers, DevOps specialists, and API architects. Unlike traditional text-only diff utilities that generate false positives from simple property reordering or whitespace changes, JSON Diff PRO constructs a normalized, hierarchical Abstract Syntax Tree (AST) across 2, 3, or more data streams simultaneously. It detects semantic modifications, insertions, and deletions with sub-millisecond latency, and provides one-click auto-repair for broken syntax alongside export options in JSON, Markdown, CSV, and Unified Git Patches.

✓

100% Client-Side Execution: All operations execute inside your browser sandbox. Zero files, color swatches, or code payloads are sent to external servers.

[02] Core Comparison Engine & Traversal Pipeline

JSON Diff PRO executes a multi-stage comparison pipeline entirely inside browser memory with zero network overhead:

Recursive AST Traversal Engine

Walks multiple JSON trees in lockstep. At each path node ($), it computes an equivalence matrix across all active input streams, classifying nodes as identical, modified, added, or missing with O(N) linear time complexity.

Multi-Stream Parallel Matrix

Supports N-way comparison (e.g. v1 vs v2 vs v3, or Dev vs Staging vs Prod). Rather than restricting developers to pairwise diffs, it creates a unified multi-column grid aligning matching JSONPath keys across all streams.

Heuristic Syntax Auto-Repair

A multi-pass regex sanitizer converts unquoted keys, single quotes, Python literals (True, False, None), trailing commas, and JS-style comments into compliant RFC 8259 JSON prior to AST parsing.

Key Sorting & Normalization Layer

Applies natural alphabetical key ordering (`localeCompare({ numeric: true })`) on object keys before traversal, guaranteeing that dictionary property reordering never triggers false positive differences.

Dual-Mode Visualization Subsystem

Provides both a hierarchical Tree Matrix View (with expandable nodes, badges, and JSONPath copy) and a synchronized Line Diff View (split or unified column modes).

[03] 1. Multi-Stream (N-Way) Differential Analysis

Traditional diff tools are limited to 2-way comparison (Left vs Right). When evaluating evolving microservice payloads or Kubernetes configurations across environments, developers often need to contrast 3 or more environments simultaneously: - **Stream 01**: Dev environment or v1 API - **Stream 02**: Staging environment or v2 API - **Stream 03**: Production cluster or v3 Canary API JSON Diff PRO dynamically extends its AST comparison to multiple streams. Missing properties in any stream are marked with strike-through styling and semantic badges (`mod`, `add`, `miss`), while existing values are aligned along identical horizontal grid rows.

[04] 2. Tree Matrix View vs Line Diff View

- **Tree Matrix View (Semantic AST)**: Parses JSON into native JavaScript object representations. Key order and line formatting do not affect comparison results. Ideal for API contract auditing, database schema validations, and deep JSON nesting. - **Line Diff View (Textual Line-by-Line)**: Compares raw serialized text lines. Highlights whitespace modifications, formatting indentation changes, and specific line modifications. Features both **Split** (multi-column) and **Unified** view layouts.

[05] 3. Smart JSON Auto-Repair Rules

Pasting raw logs, Python dictionary dumps, or config snippets often yields invalid JSON. Clicking the **Auto-Repair (Wand)** button executes a 5-step heuristic repair pipeline: 1. **Comment Stripping**: Removes single-line (`//`) and multi-line (`/* */`) comments. 2. **Python Literal Normalization**: Converts `True` -> `true`, `False` -> `false`, `None` -> `null`. 3. **Key Quoting**: Converts bare words (`{ id: 123 }`) and single-quoted keys (`{ 'id': 123 }`) into compliant `{ "id": 123 }`. 4. **String Normalization**: Converts single-quoted string values (`: 'hello'`) into double quotes (`: "hello"`). 5. **Trailing Comma Pruning**: Strips trailing commas immediately preceding closing braces (`}`) or brackets (`]`).

[06] 4. Multi-Format Export Specifications

- **Structured JSON Report**: Machine-readable payload containing diff summary metrics, compared stream IDs, and flattened difference arrays with JSONPaths. - **Markdown PR Table**: Formatted GitHub / GitLab Markdown table ready to paste directly into Pull Request descriptions or Slack channels. - **CSV Matrix**: Tabular representation of paths, diff types, and values per stream for spreadsheet auditing in Microsoft Excel or Google Sheets. - **Unified Patch (.diff)**: Standard unified diff patch format compatible with `git apply` and standard patch utilities.

[SPEC] Technical Specifications & Limits

Parameter / Property	Specification / Value
AST Diff Time Complexity	O(N) Linear Relative to Node Count
Supported Streams	2 to 8+ Parallel Streams per Board
View Modes	Tree Matrix View & Split/Unified Line Diff
Supported Export Formats	JSON Report, Markdown PR Table, CSV Matrix, Unified .diff Patch
Normalization Filters	Key Sorting, Loose Type Equality, Whitespace Ignore, Hide Identical
Execution Engine	100% Client-Side In-Memory V8 Execution

[KEYS] Keyboard Shortcuts

Copy full JSONPath expression to clipboardHover + Click Path Icon

Execute heuristic JSON syntax repair & formattingMagic Wand Button

Minify stream JSON payloadMin Button

Open Export Modal for JSON / Markdown / CSV / PatchExport Patch Button

[CODE] Developer Integration & Code Examples

Recursive AST Equivalence Traversal

export function analyzeDiff(filesData, options = {}) {
  const { sortKeys = true, looseTypes = false } = options;
  
  function traverse(nodesData, currentPath = '$') {
    const allPrimitives = nodesData.every(v => v === null || typeof v !== 'object');
    
    if (allPrimitives) {
      const isDifferent = nodesData.some((v, _, arr) => !areValuesEquivalent(arr[0], v, looseTypes));
      return {
        path: currentPath,
        isLeaf: true,
        values: nodesData,
        isDifferent,
        diffKind: isDifferent ? 'modified' : 'identical'
      };
    }
    
    const children = {};
    const allKeys = collectUniqueKeys(nodesData, sortKeys);
    
    allKeys.forEach(key => {
      const subPath = `${currentPath}.${key}`;
      const childValues = nodesData.map(parent => (parent ? parent[key] : undefined));
      children[key] = traverse(childValues, subPath);
    });
    
    return { path: currentPath, children, isLeaf: false };
  }
  
  return traverse(filesData.map(f => f.data));
}

[FAQ] Frequently Asked Questions

Try JSON Diff Online Now

Test all features in your browser with zero installations, zero server uploads, and 100% free offline capabilities.

Open Interactive Tool