JSON Tree Diff
Compare two JSON documents with visual tree diff. Highlight added, removed, modified nodes. Expandable tree view. Free online JSON comparison tool
A line-based diff on two JSON files where one has been formatted differently or has reordered keys produces visual chaos that is almost useless. JSON is structural — keys order does not matter, whitespace does not matter, but added/removed nodes and changed values do. This diff tool parses both inputs, walks the tree, and shows three categories of change: added nodes (only in right), removed nodes (only in left), modified nodes (both sides, different values). Works on objects, arrays, and nested combinations to arbitrary depth.
Why structural diff is different from text diff
Two JSON documents can be byte-different but semantically identical: {"a":1,"b":2} and {"b":2,"a":1} have the same data, different text. A line-diff says "every line changed"; a structural diff says "no change". Conversely, two JSON docs with identical layout can differ semantically only at one deeply-nested value — a line-diff highlights one line, a structural diff names the JSON Pointer path.
For arrays the question of "moved" vs "changed" matters more. Some structural diff algorithms (RFC 6902 JSON Patch) treat arrays positionally — element at index 0 is different from element at index 1, even if it is the same object. Others (json-diff with --keys-only or moved-element detection) try to identify moves. This tool defaults to positional comparison; for "moved element" detection, normalize the arrays first.
Working example: an API response that changed
Input
Before:
{
"user": {
"id": 42,
"name": "Ada Lovelace",
"email": "ada@example.com",
"roles": ["admin", "user"]
}
}
After:
{
"user": {
"id": 42,
"name": "Ada Lovelace",
"emailAddress": "ada@example.com",
"roles": ["admin", "user", "beta"],
"lastLogin": "2026-05-14T08:23:00Z"
}
}Output
~ user.roles[2]: added "beta" + user.lastLogin: "2026-05-14T08:23:00Z" + user.emailAddress: "ada@example.com" - user.email: "ada@example.com" Render notes: ~ = modified (existed before, value differs) + = added - = removed The emailAddress / email rename is shown as one add + one remove. Tools cannot infer "this was renamed" without naming convention hints.
For renames specifically, you have to interpret remove+add pairs as rename if both have the same value. JSON Patch (RFC 6902) has no "rename" op natively; you express renames as remove + add. JSON Merge Patch (RFC 7396) is similar.
How to read the diff output
- JSON Pointer paths — RFC 6901 syntax. /user/roles/2 = "the third element of the roles array inside user". Slashes escape characters: ~0 = literal ~, ~1 = literal /. Use these paths to navigate to the changed nodes in your source data.
- Path-by-path output — each change is one line: path + verb + value. Easy to grep, easy to programmatically post-process.
- Tree view — for visual review, collapses unchanged subtrees and highlights only the changed branches. Faster than reading text output for deeply nested data.
- Filtering — toggle additions / removals / modifications independently. Useful when reviewing a release: "show me all the new fields" without the noise of changed values.
When to reach for this tool
- You are debugging "the API response changed and tests are failing" — diff the recorded fixture against the current response.
- You are migrating between two services that produce "the same" API and want to identify every behavioral difference.
- You inherited a JSON config file with hundreds of nested keys and need to compare staging vs production to find environment-specific overrides.
- You are validating that a JSON Patch (RFC 6902) actually transforms input A into expected output B — apply the patch, diff against expected.
What this tool will not do
- It will not detect renames automatically. A removed key + an added key with the same value will appear as two separate changes; you can interpret the pair as a rename, but no heuristic is universally correct.
- It will not align reordered arrays. {"items":[A,B,C]} vs {"items":[C,A,B]} appears as three changed elements. For order-insensitive comparison, sort arrays first by a stable key.
- It will not produce a JSON Patch. Output is human-readable. For producing a patch document (RFC 6902 operations), use a library like fast-json-patch.compare().
Both JSON documents are parsed and compared in your browser. Production payloads with PII stay local.
Frequently asked questions
Why are reordered object keys "no change" but reordered array elements "change"?
Because JSON objects are unordered by spec — {"a":1,"b":2} and {"b":2,"a":1} are the same object. Arrays are ordered — [1,2,3] and [3,2,1] are different lists. The diff respects the spec: object-key reorder is no diff; array reorder is element-by-element diff.
How does this differ from "jq --diff" on the command line?
jq itself does not have a built-in diff; jq -S sorts keys to enable a useful text diff with diff/git. Dedicated tools (json-diff, json-patch-tools) do structural diff and produce JSON Patch output. This tool is structural diff with human-readable output.
What is JSON Patch?
RFC 6902. A standardized representation of changes to a JSON document as a JSON array of operations: add, remove, replace, move, copy, test. Used by APIs that accept partial updates and want a precise format ("replace /user/email with the value X").
How big a JSON document can I diff?
Up to a few MB in the browser without slowdown. Beyond that, parsing and tree walking become noticeable. For multi-megabyte JSON, prefer command-line tools (json-diff, deep-diff) or stream-based approaches.
My diff highlights numeric differences like 1.0 vs 1. Are those really different?
In JSON, both are valid representations of the same number, and most parsers normalize to the same internal value. Diff tools that compare parsed values say "no diff"; tools that compare raw text say "diff". This tool compares parsed values — 1.0 and 1 are the same number, no diff reported.
Can I diff JSON5 or YAML files?
Convert to JSON first. The diff is structural — once parsed to a tree, the original syntax does not matter. YAML's anchors and comments do not survive the conversion; the diff is on the data, not the source.
Related tools
Format and beautify JSON, XML, CSS, HTML, JavaScript, SQL code. Auto-indent and syntax highlight. Free online code beautifier and formatter
Convert data between JSON, CSV, YAML, XML, TOML formats online. Free data format transformer with syntax validation and pretty printing
Compare two texts and highlight differences side by side. Find changes between files, code versions. Free online text comparison diff tool
Generate JSON Schema from example JSON data automatically. Create validation schemas for APIs. Free online JSON Schema builder for developers
Advanced spreadsheet-like table editor. Sort, filter, search data. Basic formulas support. Import/export CSV, JSON. Free online data grid editor
Test JSONPath expressions with live results. Query JSON documents with JSONPath syntax. Free online JSONPath evaluator and debugger
Last updated · E-Utils editorial team