JSON Diff Tool - Structural JSON Compare with JSONPath and RFC 6902 Patch

First Published:
Last Updated:

This tool performs deep structural comparison of two JSON documents, identifying additions, removals, modifications, and type changes at every level of the hierarchy. Unlike text-based diff tools, it understands JSON structure and provides JSONPath notation for each difference, smart array matching by key fields, and standards-compliant RFC 6902 JSON Patch output.

All processing is performed entirely in your browser using client-side JavaScript. No data is transmitted to any server. Your JSON data never leaves your device.

  • This tool is provided "AS IS" without any warranties of any kind.
  • The author accepts no responsibility for incorrect comparison results or data interpretation errors.
  • Always verify comparison results against your original data.
  • By using this tool, you accept full responsibility for any outcomes.

This tool uses client-side JavaScript for all processing. No data is transmitted to servers, no files are uploaded online, all processing happens locally in your browser. Once loaded, this tool continues to work even without an internet connection. For more details, please refer to our Web Tools Disclaimer.

Features

  • 🔍 Deep Structural Comparison — Recursively compares JSON at every nesting level, not just text differences
  • 🔑 Smart Array Key Matching — Match array elements by a key field (e.g., "id") instead of position, essential for comparing API responses where order may change
  • 🔄 Type Change Detection — Distinguishes between value modifications and type changes (e.g., string "5" → number 5)
  • 📍 JSONPath for Every Difference — Each difference shows its exact JSONPath (e.g., $.users[id=1].name); click any path to copy it
  • 📦 RFC 6902 JSON Patch Output — Generate a standards-compliant JSON Patch document to programmatically transform the original into the modified JSON
  • 📊 Four Visualization Modes — Summary table, interactive tree diff, side-by-side with inline highlighting, and JSON Patch view
  • 🌳 Interactive Tree Diff — Merged tree with expand/collapse, color-coded changes, and change indicators
  • ↔️ Side-by-Side with Highlighting — Synchronized scrolling panels with inline diff highlighting on changed values
  • 📊 Diff Statistics Dashboard — At-a-glance summary of additions, removals, modifications, and type changes
  • ⇄ Swap Sides — Quickly reverse the comparison direction
  • 🔒 Complete Privacy — All processing happens in your browser; your JSON data never leaves your device

How to Use

  1. Paste your original JSON in the left panel and modified JSON in the right panel
  2. (Optional) Check "Ignore array order" and specify an array key field (e.g., "id") to match array elements by key instead of position
  3. (Optional) Check "Ignore whitespace in strings" to disregard leading/trailing whitespace differences in string values
  4. Click "Compare" to run the structural comparison
  5. Review the results using the four view tabs:
    • Summary: Table of all differences with JSONPath, change type, and values
    • Tree Diff: Merged tree view with expand/collapse and color-coded changes
    • Side-by-Side: Both formatted JSONs with inline highlighting on changed values
    • JSON Patch: RFC 6902 JSON Patch output for programmatic use
  6. Click any JSONPath in the summary table to copy it to your clipboard
  7. Use "Copy Result" to copy the current view's content, or "Copy Patch" in the JSON Patch view

Important Notes

  • Both inputs must be valid JSON. The tool will report parse errors with details if either input is invalid.
  • Array key matching requires all array elements to be objects containing the specified key field. If the key field is not found in all elements, the tool falls back to value-based matching.
  • The JSON Patch output follows RFC 6902 specification and can be applied programmatically using standard JSON Patch libraries.
  • Very large JSON documents (thousands of keys) are supported but may take slightly longer to process.
  • Type changes (e.g., string to number) are reported separately from value modifications to help catch unintended schema changes in API responses.

References:
Tech Blog with curated related content
Web Tools Collection

Written by Hidekazu Konishi