JSON Compare

Paste the original document on the left and the changed one on the right, then press Compare JSON. You get a structural diff. It walks both trees key by key instead of lining up text, so a value that has only moved to a different position in the file isn't reported as a change.

What counts as a difference

The walk recurses through objects and arrays and puts each path into one of four outcomes:

• Added: the path exists on the right and not on the left.
• Removed: the path exists on the left and not on the right.
• Changed: both sides have the path but the values aren't equal.
• Type changed: "1" on one side and 1 on the other. This is the one most likely to be quietly breaking something downstream.

Array elements are addressed by index, so items[2].price is a path like any other. That means inserting an element near the front of a long array shifts everything after it and reports a lot of differences. It's accurate, but not much help, so you're usually better off sorting both arrays by a stable key before you compare.

The two toggles, and when to use each

Ignore key order sorts every object's keys alphabetically on both sides before anything is compared. Serialisers don't agree on key order. Python dictionaries, Go struct marshalling and a JavaScript object literal can each emit the same data in a different order, and without this toggle the side-by-side view of two equivalent responses turns into a wall of red.

Ignore case lowercases both documents completely, keys and values alike. It's the blunter of the two and it's meant for one job: checking whether two configurations really differ when one system writes "Region": "US-East-1" and another writes "region": "us-east-1". Switch it off again before comparing anything where case is part of the data, because it'll hide a genuine change from Active to active.

Both toggles apply to the tree view and the side-by-side view at once. In an earlier build they were only wired into one of the two, so the panes could sit side by side disagreeing about whether a document had changed.

Reading the two views

The tree view nests differences under their parent paths and shows a count on each branch, so you can collapse a subtree nobody touched and keep the shape of the change in view. The side-by-side view works line by line, with the left and right documents aligned and each differing row tinted.

Show Differences Only filters the side-by-side view down to changed rows plus two lines of context above and below each one. On a 4000-line configuration file with six real changes, that's what makes a proper review possible instead of a quick skim. Toggling it used to crash the pane outright. That's fixed.

Where this fits

Most people use this to compare an API response before and after a deploy, or a config file across two environments. For the first, run both payloads through JSON Formatter with key sorting on before you paste them in. With the same canonical shape on both sides, the diff gets much shorter. For the second, keep in mind that a diff only tells you what changed. It can't tell you which side is correct.

Neither document is sent anywhere. The comparison runs on the strings in your own tab and no request leaves the page. Both panes are kept in sessionStorage while the tab stays open and discarded when it closes, and if you've just pasted a production connection string, the "Clear it now" link removes them straight away.