JSON Compare

Paste an original document on the left, the changed one on the right, and press Compare JSON. The result is a structural diff: it walks both trees key by key rather than lining up text, so a value that moved to a different position in the file is not reported as a change.

What counts as a difference

The walk recurses through objects and arrays and classifies 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 are not equal.
• Type changed — "1" on one side and 1 on the other, which is the failure mode most likely to be silently breaking something downstream.

Array elements are addressed by index, so items[2].price is a path like any other. Inserting an element near the front of a long array therefore shifts everything after it and reports a great many differences; that is honest rather than helpful, and sorting both arrays by a stable key before comparing is usually the better move.

The two toggles, and when each one earns its keep

Ignore key order reorders every object alphabetically on both sides before anything is compared. Serialisers do not agree on key order — Python dictionaries, Go struct marshalling and a JavaScript object literal will emit the same data three different ways — and without this toggle a side-by-side view of two equivalent responses is a wall of red.

Ignore case lowercases both documents wholesale, keys and values alike. It is the blunter of the two and it is meant for one specific job: checking whether two configurations differ in substance when one system writes "Region": "US-East-1" and another writes "region": "us-east-1". Turn it off again before you compare anything where case is data, because it will hide a genuine change from Active to active.

Both toggles apply to the tree view and the side-by-side view at the same time. In an earlier build they were wired into only one of the two, so the panes could sit on screen contradicting each other 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 an untouched subtree and keep the shape of the change in front of you. The side-by-side view is line-oriented, 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 is the difference between a review you can do and one you will skim. Toggling it used to crash the pane outright, which is fixed.

Where this fits

The two documents most people compare here are an API response before and after a deploy, and a config file across two environments. For the first case, run both payloads through JSON Formatter with key sorting on before you paste them — a canonical shape on both sides makes the diff far shorter. For the second, remember that a diff can only tell you what changed, not which side is correct.

Neither document is transmitted anywhere; the comparison is arithmetic on strings in your own tab, with no request leaving the page. Both panes are remembered in sessionStorage while the tab stays open and are discarded when it closes, and the "Clear it now" link removes them on the spot if you have just pasted a production connection string.