JSON Compare
Developer ToolsDiff two JSON documents — paste them or drop the files — and see exactly what changed.
Runs entirely in your browser — nothing is uploaded
Features
- Compare by pasting, or by dropping a .json file onto either side.
- Structural diff, not a text diff — reformatting and key order are never reported as changes.
- Every difference is listed with its full path, like config.featureFlags.newCart.
- Added, removed and changed are each labelled in words as well as colour.
- A type change reads as one row — "was a string, now a number" — instead of two.
- Optionally ignore array order, for APIs that return the same records in a different sequence.
- Parse errors point at the line and column, so a broken file is quick to fix.
- Copy or download the whole comparison as plain text for a pull request or bug report.
How to use the JSON Compare
- 1Put the original on the left — paste it, or drop a .json file onto the box.
- 2Put the version you want to check on the right.
- 3Read the summary: how many keys were added, removed and changed.
- 4Switch to All keys to see what stayed the same, or copy the report to share it.
Frequently asked questions
Is this a text diff or a real JSON comparison?
A real one. The two documents are parsed first and then compared structurally, so whitespace, indentation and the order of keys are irrelevant — {"a":1,"b":2} and {"b":2,"a":1} are reported as identical. A text diff would call those completely different, which is what makes text diffs frustrating on JSON.
Are my files uploaded anywhere?
No. Dropping a file uses the browser FileReader API, which reads it from disk into this page. Both documents are parsed and compared by JavaScript already running in your tab, and nothing is sent to a server. You can confirm it by opening the Network tab in your developer tools and comparing two files.
What does "ignore array order" do?
By default an array is compared position by position, so moving an item counts as two changes. With the option on, items are matched by value wherever they appear, and only genuine additions and removals are reported. Turn it on when comparing API responses whose ordering is not guaranteed; leave it off when the order is part of the data, as in a sequence of steps.
How does it treat null against a missing key?
As different, because they are. A key present with the value null is a statement that the field exists and is empty; a key that is absent says nothing at all. Many diff tools blur the two and it causes real bugs, so this one keeps them apart.
What happens with very large files?
Files up to 8 MB per side load fine. The comparison stops after 5,000 differences to keep the tab responsive, and says so clearly when it does — the counts shown are then of what was compared, not of the whole file. If you hit that, the two documents are different enough that a summary is more useful than a list.
What is the path notation in the results?
The route to the value from the root of the document: users[0].email means the email field of the first item in the users array. Keys that are not valid identifiers are quoted and bracketed instead, as in ["content-type"], so a path can be pasted straight into code.