DevTool Desk

JSON Diff / Compare

  • Removed — only in Original
  • Added — only in Changed
  • Empty — no matching line on this side
  • Plain — unchanged
OriginalChanged
1{
1{
2 "author": {
2 "author": {
3 "email": "sam@example.com",
3 "email": "sam@devtooldesk.com",
4 "name": "Sam"
4 "name": "Sam",
 
5 "url": "https://devtooldesk.com"
5 },
6 },
 
7 "license": "MIT",
6 "name": "devtool-desk",
8 "name": "devtool-desk",
7 "private": true,
 
8 "scripts": {
9 "scripts": {
9 "build": "next build",
10 "build": "next build"
10 "start": "next start"
 
11 },
11 },
12 "tags": [
12 "tags": [
 
13 "tools",
13 "json",
14 "json",
14 "diff",
15 "compare"
15 "tools"
 
16 ],
16 ],
17 "version": "1.0.0"
17 "version": "1.1.0"
18}
18}

Keys are sorted and the JSON is reformatted, so only real differences are highlighted.

Paste two JSON documents and see exactly what's different between them — every added, removed, and changed value, listed by its path. Unlike a plain text diff, this compares the data itself, so reordered keys and different indentation don't show up as changes. Use it to compare API responses, config files, fixtures, or a before-and-after export. Everything runs in your browser.

Frequently asked questions

How is this different from a normal text diff?

A text diff compares lines, so reformatting or reordering keys makes everything look changed. This tool parses both documents and compares the values, so { "a": 1, "b": 2 } and { "b": 2, "a": 1 } are identical. The 'Side by side' view shows both documents next to each other with the differing lines highlighted in red (removed) and green (added) — keys are sorted first so only real differences stand out.

What do the colors mean?

Red means the value exists only in the Original document (it was removed). Green means it exists only in the Changed document (it was added). In the Differences list, amber marks a value that exists on both sides at the same path but has a different value — shown as old → new. In the side-by-side view, grey empty cells mean the other side has no matching line there, and uncolored lines are identical on both sides.

How do I read the paths?

$ is the root of the document. .name means the key 'name', and [2] means the third item of an array — so $.users[2].email is the email of the third user. Keys with unusual characters appear as ["key-name"].

What does 'Ignore array order' do?

By default arrays are compared position by position, so moving an item shows up as changes at both positions. With 'Ignore array order' on, items are matched by value regardless of position — useful for tag lists or sets — and only items that are genuinely present in one document but not the other are reported. Those appear at a path ending in [].

Is my JSON uploaded anywhere?

No. Both documents are parsed and compared entirely in your browser, so it's safe to compare responses that contain sensitive data.