Skip to content
devsmiths

JSON Diff

Compare two JSON documents — see adds, removes, and changes.

Live

What this tool does

The JSON Diff tool compares two JSON documents and shows you exactly what changed — keys added, keys removed, values changed — with the precise JSONPath for each difference. Pick object mode to ignore key order and compare structurally (the usual case), or text mode for a literal line-by-line diff when you care about whitespace and formatting. Everything runs in your browser — nothing is uploaded.

How to use it

Paste a JSON document into each pane (or click Load Example). The diff appears in the result pane: green rows for additions, red for removals, yellow for changes. Toggle Only differences off to also see the count, copy the diff as text, or download it.

Input A:

{"name":"devsmiths","version":1,"features":["formatter","validator"],"public":true}

Input B:

{"name":"devsmiths","version":2,"features":["formatter","validator","viewer"],"beta":true}

Diff (object mode):

~ $.version           1 → 2
+ $.features[2]       "viewer"
- $.public            true
+ $.beta              true

Limits and edge cases

  • Array comparison is positional — element i in A is compared to element i in B. Reordering an array therefore shows up as a chain of changes. LCS-based array pairing is on the P1-stretch list.
  • Text mode is a basic longest-common-prefix + suffix diff — the removed and added blocks aren’t paired into “changed lines”; you get a clear before/after but not a Myers-quality diff.
  • Object mode ignores object key order and any insignificant whitespace (it parses both sides). Text mode is whitespace-sensitive by design.
  • If either side fails to parse in object mode, the tool shows a banner with the line/column of the parse error — fix it with the Validator or the Repair tool.
  • JSON Patch (RFC 6902) output is a stretch goal — today the tool emits a human-readable diff list.
  • Background reading: comparing two JSON files walks through the strategies (object vs text, semantic vs positional) in depth.

Frequently asked questions

What's the difference between object compare and text compare?
Object compare parses both sides into JSON values and walks the trees — it ignores key order and insignificant whitespace, and reports differences by JSONPath (e.g. $.users[0].name). Text compare does a literal line-by-line diff of the two strings — useful when formatting itself is meaningful.
Why does reordering an array show up as changes?
Array comparison is positional — A[0] is compared to B[0], A[1] to B[1], and so on. Moving an element therefore looks like a change at each affected index, plus a removal/addition at the tail. LCS-based pairing is on the P1-stretch list; today the simple positional pairing keeps the output predictable.
Does it ignore whitespace?
Object mode does — it parses both sides into JSON values, so indentation, line breaks, and key order are irrelevant. Text mode does NOT — it compares the two strings line by line, exactly as you pasted them.
How are added / removed / changed entries shown?
Green rows with a + sign for additions, red rows with a − sign for removals, yellow rows with a ~ sign for changes. Signs are present in addition to color so the diff is readable for color-blind users and in any terminal copy-paste.
Can I get JSON Patch (RFC 6902) output?
Not yet — that's tracked as a roadmap item. Today the diff is a flat list of add/remove/change ops keyed by JSONPath. You can copy or download it as text from the toolbar.
Is anything uploaded?
No. The comparison runs entirely in your browser. Both inputs are autosaved to localStorage so they survive a reload, but they never leave your device.