viewer.csslab.dev

JSON Diff

Compare two JSON documents by value, ignoring key order and formatting.

Why can't I just diff two JSON files?

A JSON object has no inherent member order, so two documents that describe exactly the same data can serialise with their keys in different sequences and different indentation. Run those through an ordinary text diff and every line comes back changed — the tool is telling the truth about the text and nothing useful about the data.

This comparison parses both sides, sorts every object's keys, re-serialises with one consistent indentation, and only then compares. What survives is the set of values that actually differ: a field that changed, one that appeared, one that went away.

An object is an unordered collection of zero or more name/value pairs.
RFC 8259 §1

Features

Key order stops mattering
Both documents are re-serialised with sorted keys before comparing, so a backend that changed its serialisation library does not produce a diff full of noise.
Formatting stops mattering
Indentation, whitespace, and line breaks are normalised away. A minified response and a pretty-printed one compare as identical when the data is identical.
Changed values are marked inside the line
When a value changes, only the part that differs is highlighted — so a single altered digit in a long line is visible rather than requiring you to compare two lines by eye.
Invalid JSON says so
If either side does not parse, the comparison stops and tells you, rather than silently falling back to a text diff and giving you a result that means something else.
Safe with real responses
Both documents stay in your browser, which is the point when the two things being compared are a production API response and a staging one.

How to use

  1. 1

    Paste both documents

    The original on the left, the changed one on the right. Minified or formatted — it makes no difference.

  2. 2

    Keep JSON comparison on

    It is on by default here. Turning it off falls back to a plain text comparison, which is what you want only if one side is not valid JSON.

  3. 3

    Read the marked values

    Removed values are marked on the left, added ones on the right, with the changed portion highlighted inside each line.

  4. 4

    Collapse the unchanged lines

    Turn on "only changes" when the documents are large and the difference is small.

Frequently asked questions

Why does a normal diff show every line as changed?

Because it compares text, and the text differs. JSON object members have no defined order, so a serialiser is free to emit them in any sequence; indentation is equally free. Both are invisible to the data and completely visible to a text diff.

Does sorting keys change the meaning of my JSON?

No. RFC 8259 defines an object as an unordered collection of name/value pairs, so two objects with the same pairs in different orders are the same object. Sorting is a fair normalisation for comparison. Arrays are different — their order is meaningful and is never sorted.

Are arrays compared by position?

Yes. In JSON an array is an ordered sequence, so an element inserted at the front legitimately shifts everything after it, and the comparison reports that. If you want order-insensitive comparison of a list, sort it in both documents first.

What if one side is not valid JSON?

The comparison stops and says so. That is deliberate — silently falling back to a text diff would give you a result that looks like an answer but is measuring something else.

Can it compare two API responses?

That is the usual reason people arrive here. Paste both bodies; formatting differences between the two environments disappear and you are left with the fields that actually changed. Nothing is uploaded, so production bodies are safe to paste.

Specifications this follows

Related tools