UtilityKit

500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

JSON Diff

Compare two JSON values structurally. See added, removed, and changed keys with color-coded paths and values.

About JSON Diff

JSON Diff is a structural comparison tool that walks two JSON values in parallel and reports every difference as a keyed path with a type (added, removed, or changed) and the corresponding values. Unlike textual diff tools that compare characters and report mismatches when keys are reordered, structural diff treats {a:1,b:2} and {b:2,a:1} as identical — only meaningful key/value differences appear. Each reported change is annotated with its full path (bracket notation for arrays, dot notation for objects), making it easy to locate in source. Color coding (green for added, red for removed, orange for changed) and aggregate counts at the top give a fast summary. The tool runs entirely in your browser and is suitable for comparing API responses, configuration snapshots, fixtures in tests, and JSON exports.

Why use JSON Diff

  • Structural Comparison: Differences are reported by key path and value, ignoring key order and whitespace — so cosmetic re-serialisation does not produce false positives the way text diff does.
  • Path-Aware Output: Every change shows the full path (e.g. items[0].price) so you can navigate directly to the differing field in your source JSON, even in deeply nested structures.
  • Color-Coded Categories: Added, removed, and changed entries each have their own color (green, red, orange) and symbol (+, -, ~), so the type of change is visible at a glance.
  • Live Diff: Edits to either side trigger a debounced re-comparison automatically — adjust an expected value and see the diff update without clicking a button.
  • Aggregate Counts: Summary line at the top shows totals per category, useful for triaging large diffs at a glance.
  • Browser-Only: Both inputs and the comparison logic stay in your tab — API responses with tokens, fixtures with PII, and config dumps with secrets never leave your machine.

How to use JSON Diff

  1. Paste the first JSON value into the left panel (A) — typically the older or expected value.
  2. Paste the second JSON value into the right panel (B) — typically the newer or actual value.
  3. Click Compare or wait for the live debounced diff to run automatically as you edit.
  4. Read the colored diff: green plus signs are additions in B, red minus signs are removals from A, and orange tildes are changes between A and B.
  5. Each line shows the path to the difference (e.g. user.tags[2]) followed by the value(s) involved.
  6. Click Swap A ↔ B to flip the comparison direction without retyping.

When to use JSON Diff

  • Verifying that a refactored API still returns equivalent JSON by comparing recorded fixture responses.
  • Reviewing changes between two configuration snapshots before deploying — staging vs production diff.
  • Debugging which field changed when a downstream consumer reports unexpected behaviour.
  • Comparing two JSON exports from the same tool taken at different times to detect drift.
  • Spot-checking a JSON migration by comparing one record before and after the migration script.
  • Testing serialiser changes by comparing the output of a function across two code revisions.

Examples

Field added and value changed

Input: A: {"name":"Alice","age":30} B: {"name":"Alice","age":31,"email":"a@b"}

Output: + Added: 1 ~ Changed: 1 ~ age: 30 → 31 + email: "a@b"

Array element changed

Input: A: {"tags":["x","y","z"]} B: {"tags":["x","y","q"]}

Output: ~ Changed: 1 ~ tags[2]: "z" → "q"

Identical despite key order

Input: A: {"a":1,"b":2} B: {"b":2,"a":1}

Output: Both JSON values are structurally identical.

Tips

  • Structural diff treats {a:1,b:2} and {b:2,a:1} as identical — order does not matter for objects, but it does for arrays.
  • If you only care about specific fields, pre-filter both inputs (e.g. use jq to project the fields you want) before pasting them — keeps the diff focused.
  • For arrays, comparison is index-by-index — reordered arrays will show as multiple changes, not as a single permutation. Sort arrays before diffing if order does not matter to you.
  • When values are deeply nested objects, the diff descends into them automatically — you only see the leaf-level differences, not entire object replacements.
  • Use Swap A ↔ B to flip directions when reviewing a change — sometimes additions are easier to verify when viewed as removals from the new state.

Frequently Asked Questions

How is this different from a text-based diff like git diff?▾
Text diff compares characters and line by line, so reordered keys, different indentation, or trailing newlines all produce noise. Structural diff parses both inputs as JSON and compares keys and values regardless of formatting — only meaningful differences appear.
Does it ignore key order in objects?▾
Yes. JSON objects are unordered key-value maps by specification, so {a:1,b:2} and {b:2,a:1} are reported as identical. Arrays are ordered and reordered elements do show as differences.
What about whitespace and indentation?▾
Both are ignored — the inputs are parsed first and the diff runs on the resulting JavaScript values, not on the source text. Pretty-printed and minified JSON produce the same diff.
How are arrays compared?▾
Index by index. items[0] in A is compared to items[0] in B, items[1] to items[1], and so on. Reordered arrays will show as multiple changed entries rather than a permutation.
Can I use it to compare large JSON files?▾
Files up to a few megabytes work smoothly. Above that, the recursive diff and the rendering of thousands of change entries become slow — for huge files, project to specific sub-paths first.
What if my inputs have duplicate keys?▾
JSON.parse keeps the last value when a key is duplicated, per browser spec. After parsing, every key in each input is unique, so the diff sees a single value per key.
Is the diff sent to a server for processing?▾
No. Both inputs and the comparison run entirely in your browser using plain JavaScript. Tokens, PII, and secrets never leave your tab.
Why are deeply nested objects shown as a single 'changed' entry sometimes?▾
If both sides have an object at the same path but they are not equal at any sub-key, the diff descends recursively. You should see leaf-level differences. If you see an object-level change, it usually means one side has the value as a non-object (string, null) and the other as an object.

Explore the category

JSON Repair Fix broken JSON: trailing commas, unquoted keys, single quotes, comments, smart quotes, and missing brackets — automatically. JSON Flatten / Unflatten Toggle between nested JSON objects and dot-notation flat objects. Custom delimiter, array index handling, browser-only. JSON Formatter Format, validate and minify JSON JSON ↔ YAML Convert between JSON and YAML formats JSON Schema Validator Validate JSON data against a JSON Schema (Draft-07, Draft-2019-09, Draft-2020-12) and see detailed validation errors. Text Diff Compare two texts line-by-line
From JSON to TypeScript Types: How Type Inference Tools Work Generating TypeScript interfaces from a JSON sample looks like magic, but it's a careful walk through structural inference. We explain the r May 2026 · 9 min JSON vs YAML vs TOML: When to Use Which Config Format JSON, YAML, and TOML each solve a different problem — but pick the wrong one and you'll spend Friday night chasing a whitespace bug. Here's May 2026 · 11 min JSON Basics and Syntax: A Complete Beginner's Guide JSON is the lingua franca of modern web APIs, but its deceptively simple syntax trips up beginners in subtle ways. This guide walks through Jan 2026 · 8 min

Glossary

Structural diff
A comparison that treats JSON as a tree and reports differences in keys and values, ignoring serialisation details like key order and whitespace. The default mode of this tool.
Textual diff
A comparison that operates on raw characters or lines, common in tools like git diff. Useful for source code but produces misleading results on JSON when keys are reordered.
Path
The sequence of keys and indexes from the root of a JSON value to a specific leaf, e.g. user.tags[0]. Each diff entry is labelled with the path to the differing value.
Added
A key that exists in B (right) but not in A (left). Shown with a green + symbol and the new value from B.
Removed
A key that exists in A (left) but not in B (right). Shown with a red - symbol and the previous value from A struck through.
Changed
A key that exists in both inputs but with different values. Shown with an orange ~ symbol and both old and new values.