JSON差异比较器
深度比较两个JSON对象，并可视化已添加、已删除和已更改的键。
关于此工具
将两个JSON文档粘贴到并排窗格中，立即查看颜色编码的差异：绿色表示添加的键，红色表示删除的键，黄色/橙色表示更改的值，灰色表示未更改的内容。在并排和统一差异视图之间切换，使用上一个/下一个按钮在差异之间导航，并查看所有更改的摘要计数。
使用方法
- 1 第一步：将原始JSON粘贴到左侧窗格，将修改后的JSON粘贴到右侧窗格。
- 2 第二步：点击「比较」——差异会立即计算并在两个窗格中高亮显示。
- 3 第三步：查看摘要栏中已添加、已删除和已更改键的计数。
- 4 第四步：使用「上一个/下一个」按钮跳转到每个差异，或切换到统一视图。
What a structural JSON diff actually compares
A plain text diff treats JSON as lines of characters, so reordering keys or re-indenting a file lights up as a sea of changes even when nothing meaningful moved. A structural diff — what this tool performs — parses both inputs into real objects first, then walks the two trees key by key. The result tells you which keys were added, which were removed, and which kept the same key but changed value. Because it compares the parsed structure rather than the raw text, whitespace and key order are irrelevant; only genuine differences in data appear.
How the comparison algorithm works
The diff is recursive. At each node it first checks that the two values are the same kind of thing — an object versus an array versus a primitive. If the types differ, the whole node is reported as changed. For two objects, it gathers the union of keys from both sides: a key present only on the right is added, a key present only on the left is removed, and a key in both is compared by descending into it. For primitives (strings, numbers, booleans, null), it uses strict equality, so 5 and "5" are reported as different because one is a number and one is a string. Every difference carries a dotted path like address.city so you can see exactly where in the tree it lives.
A worked example
Load the built-in sample and you compare these two objects:
- Left:
{ name:"Alice", age:30, role:"admin", tags:["a","b"], address:{ city:"Seoul", zip:"12345" } } - Right: the same, but
age:31,role:"user",tags:["a","b","c"],address.city:"Busan",address.zip:"54321", plus a newemailkey.
The summary reports 1 added (email), 0 removed, and several changed values: age, role, address.city, address.zip, and tags.2 (the new third array element). Notice how nested paths are fully qualified, so a change buried inside address is just as visible as a top-level one.
Side-by-side versus unified view
The side-by-side view renders both documents as formatted JSON with color cues — added keys glow green on the right, removed keys glow red on the left, and changed values are highlighted amber on both panes — so you read the two states in context. The unified view collapses everything into one list grouped by change type: a block of + added lines, a block of - removed lines, and a block of ~ changed lines that print the old and new value together. Side-by-side is best for reviewing structure; unified is best for copying a concise changelog of exactly what differs. The prev/next buttons let you step through differences one at a time.
The array caveat you must know
Arrays are compared strictly by index, not by content matching. If you insert one element at the front of a list, every following element shifts by one position, so the diff reports them all as changed even though their values merely moved. This is the single most common source of confusing output. When you expect a small change but see a cascade of differences in an array, suspect an insertion or deletion near the top. For order-independent data, sort both arrays the same way before comparing, or compare the objects by a stable key rather than by position.
Practical use cases
- API regression checks: capture a known-good response and diff it against a new build to catch unintended field changes.
- Config drift: compare a staging config against production to spot a setting that was changed on one but not the other.
- Reviewing edits: paste the before and after of a JSON file you hand-edited to confirm you changed only what you intended.
- Debugging serialization: verify that data survives a round trip through encode and decode unchanged.
Tips and privacy
If either input fails to parse, the tool shows the parser's error message with the approximate location, so fix the syntax — a trailing comma or unquoted key is the usual culprit — before comparing. Because JSON object key order does not affect the structural diff, you do not need to sort keys first; identical data in different orders correctly reports zero differences. All parsing and comparison run entirely in your browser, so the documents you paste never leave your device — safe for diffing configuration or response data that contains secrets.