JSON Diff / Compare
🔒 In your browserCompare two JSON documents and see what changed.
3 difference(s)
About the JSON Diff / Compare
When two JSON documents should match but don't, spotting the difference by eye is slow and error-prone. This free JSON diff tool compares two JSON documents and shows exactly what was added, removed or changed, with the path to each difference — ideal for comparing API responses, config versions or fixtures.
The comparison happens in your browser; your data is never uploaded.
How to compare two JSON files
- Paste the original JSON on one side and the new JSON on the other.
- See additions, removals and changed values highlighted with their key paths.
- Use it to review config changes, debug API regressions or verify data migrations.
When to diff JSON structurally
A plain text diff of two JSON files is noisy — reordered keys and whitespace show up as changes even when the data is identical. A structural JSON diff compares by key and value instead, so it reports only real differences: what was added, removed or changed, with the path to each. That's what you want for comparing API responses, config versions or test fixtures.
Frequently asked questions
What does a JSON diff show?
It shows the differences between two JSON documents — which keys or values were added, removed or changed — along with the path to each change so you know exactly where it is.
Does key order matter?
JSON object key order is not significant, so a good diff compares by structure and value rather than raw text position, focusing on real differences.
Is the comparison private?
Yes. Both documents are compared locally in your browser and are never uploaded to a server.
Does key order affect the diff?
No. JSON object key order isn't significant, so the diff compares by structure and value rather than text position, focusing on genuine differences rather than reordering.
Related searches
Learn more
Related Developer tools
🔗 Embed this tool on your website — free
Copy this and paste it into your page's HTML. The tool runs in the visitor's browser, just like here. Change height to fit, or add the optional auto-resize snippet below. Add ?theme=dark to the URL for dark mode.
<iframe src="https://toolhq.dev/embed/json-diff/" title="JSON Diff / Compare — ToolsHub" width="100%" height="520" style="border:1px solid #e5e7eb;border-radius:12px;max-width:680px" loading="lazy"></iframe>Optional: auto-resize the iframe height
Add this once on the same page so the iframe grows to fit the tool:
<script>
addEventListener("message", function (e) {
if (e.data && e.data.type === "toolshub:resize") {
document.querySelectorAll('iframe[src*="/embed/"]').forEach(function (f) {
if (f.contentWindow === e.source) f.style.height = e.data.height + "px";
});
}
});
</script>