Utilo

JSON Diff

Compare two JSON documents structurally. Ignore key and array order, match array items by id, and see added, removed, changed and type-changed fields with JSON paths in a collapsible tree.

What this JSON diff tool does

Text diff tools treat JSON as lines, so a reordered key or a reformatted file shows up as a wall of red and green. This tool compares the structure of two JSON documents instead. It walks both trees, reports every added, removed and changed value with its exact JSON path, flags values whose type changed (a number that became a string is a classic API regression), and shows the result as a collapsible tree or a flat list of paths. Comparison runs in a Web Worker, so large payloads stay responsive.

How to use it

  1. Paste the original document into A and the new one into B.
  2. Read the summary counters: added, removed, changed and type changes.
  3. Use the tree view to expand only the branches that differ, or switch to paths for a copy-friendly list like $.items[2].price.
  4. Turn on ignore order when arrays are sets (tags, permissions) rather than ordered lists.
  5. Set match by key (for example id) to pair array elements by identity, so inserting one item doesn't make every following element look changed.

Typical uses

  • API regression checks: compare a response from staging and production after a deploy.
  • Config drift: diff two environment configs or Terraform JSON plans.
  • Contract testing: spot fields a backend silently removed or renamed.
  • Fixtures: review what changed in a snapshot test before accepting it.

Tips and edge cases

  • Object key order never matters; JSON objects are unordered by definition.
  • 1 and 1.0 are equal numbers in JSON; "1" and 1 are a type change.
  • With ignore order, arrays of primitives are compared as multisets, so duplicates still count.
  • Match by key only applies to arrays of objects that all contain that key; other arrays fall back to index comparison.
  • Invalid JSON is reported with the parser's error message for the side that failed.

Frequently asked questions

Is my data sent to a server?

No. Both documents are parsed and compared locally in your browser.

How is this different from the text diff tool?

The text diff compares lines. This tool understands JSON, so formatting, whitespace and key order produce no noise, and every difference comes with a path.

Can I compare very large files?

Files of several megabytes work well because the diff runs off the main thread. The tree renders lazily as you expand nodes.

What does "type changed" mean?

The value exists on both sides but its JSON type differs, for example an object replaced by an array or null replaced by a string.

Yes. All processing happens directly in your browser using JavaScript, Web Workers and Web APIs. Nothing you type, paste or upload is sent to our servers.