About the diff
JSON Diff: compare two JSON documents.
Your document never leaves the browser.
- no sign-up
- works offline
Put a baseline on the left and another version on the right, then read the additions, removals and changes without whitespace noise. See the Compare guide for a worked example, or open the JSON editor.
Compare data instead of lines
Pretty
{
"name": "Ada",
"active": true
}Minified
{"name":"Ada","active":true}Result
No differencesA line diff is useful for source code, where spacing and order are intentional. JSON is often generated, and two systems can serialise the same object with different indentation or a different property order. Calling every moved line a change hides the one value that matters. This page parses both documents and compares their structures, so whitespace and object-member order disappear from the question.
The page opens in Compare with two panes side by side and Code on the left. The right pane starts in Code too when its own document is empty, with a prompt for the second input. Nothing is painted until both panes contain a document. Paste, open or drop each version, or choose the inventory v1 vs v2 sample to fill the pair in one step.
Additions, removals and changed values
Left
{
"name": "Ada",
"role": "reader",
"active": true
}Right
{
"name": "Ada",
"role": "editor",
"team": "docs"
}Result
+1 −1 ~1
~ $.role "reader" → "editor"
− $.active true
+ $.team "docs"Left
{"id":"1"}Right
{"id":1}Result
+0 −0 ~1
~ $.id "1" → 1A value found only on the right is an addition; one found only on the left is a removal; two values at the same structural location with different content are changed. The result is painted in both panes, whether each pane is showing Code, Tree, Table or Graph. Containers that hold a deeper difference receive a quieter within state, so collapsing a branch does not make the fact that it contains changes disappear.
The status bar summarises the result as +N −N ~N: additions, removals and changes. Identical data reads No differences even if one source is minified and the other uses four-space indentation. Invalid input pauses the comparison rather than diffing a recovery tree whose missing pieces could create false marks. Empty input pauses it for the same honesty: absence of a second document is not a document full of removals.
Walk the differences in document order
Previous and Next in the Compare controls move through the difference list. Each step reveals the corresponding location in both panes and reports its position, such as Difference 2 of 7. The sequence follows the left document from top to bottom; an addition that exists only on the right is placed where it belongs among those left-side locations. This makes repeated presses advance steadily through the baseline instead of jumping unpredictably around it.
A Code pane selects and scrolls to the changed token. Tree, Table and Graph reveal the matching row, cell or node. The two documents do not need visual filler to force their lines into alignment: the navigator brings both sides of the same structural change into view, which works even when one inserted object makes every later line number differ.
Copy a complete version across
The two arrows in the gutter copy the entire document from their source pane over the other one. This is useful after deciding that one version should become the new baseline, or when you want to accept one side and continue editing from there. The source must contain something, and the arrows only belong to Compare; Mirror already has one shared document, while Schema deliberately keeps data and schema apart.
Overwriting real work is guarded. When the destination contains a document the app did not just write for you, it asks before replacing it and names what would be lost. A confirmed copy is still one undoable replacement. Swap is different: it exchanges both documents while briefly suspending the diff so the status does not flash through a half-swapped pair.
Objects ignore order; arrays keep it
Object left
{"a":1,"b":2}Array left
[1,2,3]Object right
{"b":2,"a":1}Array right
[1,3,2]Object result
No differencesArray result
+1 −1 ~0
+ $[1] 3
− $[2] 3Object properties are matched by name, not by where they were printed. Reordering address before name therefore makes no difference. Duplicate names follow the effective last value, matching how JSON.parse and the editor’s path lookup interpret them. Strings compare by their decoded value, so two equivalent escape spellings do not create noise; number tokens compare as written, preserving distinctions such as -0 versus 0 and 1.0 versus 1.
Arrays are ordered data. The matcher trims equal prefixes and suffixes, finds unique values that can anchor both sides, and aligns the gaps between them so inserting one record does not normally mark every later record changed. This content matching is why a moved or inserted item can be paired even when its numeric index is different on the two sides.
What happens with very large arrays
The expensive part of array alignment grows with the product of the unmatched lengths. After the cheap anchors have reduced the work, the editor allows up to one million alignment cells. If an unanchored gap would exceed that ceiling, it compares that gap by position instead. The diff remains valid but may be noisier: one insertion can appear as a run of changed items followed by an addition.
That fallback is disclosed in the status title as the number of large arrays compared by position. It is not a silent claim that the cheaper alignment found the best pairing. Tree and Table also ask before building a structural view above 10 MB, while Code remains available; the comparison engine itself works from the same position-aware parses the views use.
Start with the Compare sample
Samples ▾ includes inventory v1 vs v2, a pair designed to show one addition, one removal and one changed value. Loading it switches to Compare when necessary, fills both stores and turns difference paint on. Because the sample supplies the two documents together, it never passes through the waiting state described above. It is the fastest way to learn the colours, the summary and the Previous and Next controls before opening your own files.
The same workspace is available from the mode switch in the JSON editor, and choices made there stay within this browser tab. No comparison is submitted to a remote service, no account is required, and loaded local files remain local.