How do I compare two JSON files online?

Paste the first file into the left pane and the second into the right pane. The tool parses both, walks every key, and shows a three-way result: additions (green), deletions (red), and modifications (yellow). The comparison is order-independent — key ordering in the source does not affect the result. For file-level comparison use the upload button to pick two .json files from your disk.

Is the comparison order-sensitive?

For objects — no. Two objects with the same keys and values are equal regardless of key order. JSON object keys are unordered by spec (RFC 8259). For arrays — yes, by default. Arrays are ordered sequences, so [1,2,3] and [3,2,1] are different. There is a mode to compare arrays as sets (ignoring order) for cases where the array is really a set — toggle it in the options.

How does the comparator handle type changes?

A type change is flagged as a modification. If the left value is "42" (string) and the right value is 42 (number), the diff shows both type and value changed. This matters because JavaScript and most APIs treat them as different values, but humans often read them as equal. If you want loose equality (coerced comparison), prefer our json-diff-online tool with the loose mode flag.

Can I compare two nested JSON files with hundreds of keys?

Yes. The comparator walks nested objects recursively and reports every path that differs, using dot-paths like user.profile.email. Arrays are walked by index. The output is a tree view that you can collapse at any level. For very large files (10MB+), expect a 2-5 second parse — all work is client-side so browser memory is the only limit.

What is the difference between this and a plain text diff?

A text diff compares line-by-line. If one file has keys reordered or indentation changed, every line looks different even though the data is identical. A JSON diff parses both files first, then compares the resulting data structures — key order and whitespace are ignored, type differences are flagged, and nested changes are reported at the exact field path. Use text diff for change tracking, JSON diff for data comparison.

Is my data safe when I upload JSON files here?

Yes. Files are read with the FileReader API locally in your browser and never uploaded to any server. All parsing and comparison is client-side. Open the Network tab in DevTools to confirm: zero outgoing requests during a comparison. Safe for proprietary configs, PII, API responses, and anything you cannot send to a cloud service.

Compare Two JSON Files — Side-by-Side JSON File Diff (Free, Online)

Side-by-side JSON file diff — order-independent, type-aware, handles nested objects and arrays. Runs in your browser.

Why Text Diff Falls Short for JSON

Every git-literate dev has reached for diff file1.json file2.json and watched it light up red and green for a change that was not actually a change — one file had the keys reordered, or indentation switched from two spaces to four, or a trailing newline appeared. Text diff compares bytes. JSON compares data. The two agree only when the source and target happen to be byte-identical, which almost never happens between a prod payload and a staging payload.

A JSON-aware comparator parses both files into real data structures and walks them. Key order is ignored (the JSON spec says keys are unordered). Whitespace, trailing commas, and comment-like text are irrelevant — the parser consumes them. What remains is a deterministic answer to one question: at what path does the data differ?

Example: Config Drift Between Environments

You have the same microservice config in two environments and want to find out why staging is misbehaving.

// production.json
{
  "db": { "host": "db.prod", "port": 5432, "pool": 20 },
  "cache": { "ttl": 300, "backend": "redis" },
  "features": { "newCheckout": true, "legacyAuth": false }
}

// staging.json
{
  "features": { "newCheckout": true, "legacyAuth": true, "debugMode": true },
  "cache": { "ttl": 60, "backend": "redis" },
  "db": { "host": "db.stage", "port": 5432, "pool": 5 }
}

Key order differs, but the comparator ignores that. The real diff:

~ db.host:              "db.prod"  →  "db.stage"
~ db.pool:              20          →  5
~ cache.ttl:            300         →  60
~ features.legacyAuth:  false       →  true
+ features.debugMode:   true  (only in staging)

How Nested Objects Are Walked

The comparator uses depth-first recursion with path tracking. Each key extends the path:db → db.host, db.port. Nested objects extend further: features.newCheckout. Arrays extend by index:users[0].email. The result is a flat list of changes keyed by path, which makes the diff trivial to read, filter, and apply as a patch.

Array Comparison: Ordered vs Set

Arrays are the only ambiguity in JSON. The spec says arrays are ordered, but many APIs use arrays where the order is incidental — a set of tags, a list of permissions, a multi-select value. The comparator supports both modes:

Ordered (default). Compares arrays element-by-element by index.["ai", "ml"] and ["ml", "ai"]show two changes: position 0 and position 1 both differ.
As set. Compares arrays as unordered collections.["ai", "ml"] and ["ml", "ai"]report zero changes. Good for tag lists, permission arrays, and any list where uniqueness is the only property that matters.

Type Awareness

JSON has six value types: string, number, boolean, null, object, array. A type change is a bigger signal than a value change — it almost always means a bug in whichever code produced the file. The comparator flags type changes explicitly:

~ user.id:    "42"  (string)  →  42  (number)      ← type changed
~ user.age:   30             →  null              ← value changed, now null
~ user.tags:  "admin"        →  ["admin"]         ← type changed

A type change costs more than it looks like: downstream code will either crash or silently coerce. The one most teams miss is id-as-string vs id-as-number — JavaScript loses integer precision past 2^53, which is why many APIs stringify IDs. Mixing the two between environments means every join and every lookup silently fails.

Ignoring Noisy Keys

Timestamps, request IDs, ETags, and other transient fields change on every request but don't matter for structural comparison. Add a comma-separated ignore list and the comparator skips those paths:

// Ignore list
timestamp, request_id, trace_id, etag, lastModified, created_at

// These paths are skipped at any nesting depth

A good practice: start with a strict comparison, then add keys to the ignore list only when you know they are intentionally volatile. Ignoring too much hides real drift.

Exporting the Diff

Reading a diff is one thing; applying it is another. The tool exports three formats:

Human-readable text (the default) — nice for code reviews, slack messages, and bug reports.
JSON Patch (RFC 6902) — a sequence of op/path/value instructions (add, remove, replace). Applied with libraries like fast-json-patch or jsonpatch (Python).
JSON Merge Patch (RFC 7396) — a single patch object. Simpler but cannot represent array index operations. See our JSON Merge Online tool for the matching merge operation.

Common Pitfalls

Invalid JSON on one side. If either file has a syntax error, the parser fails and no comparison runs. The pane highlights the exact line and column. Fix the error first (missing comma, trailing comma on the last key, unquoted key).
UTF-8 BOM. Files exported from Windows tools often start with a byte order mark (U+FEFF). The parser strips it, but a plain text diff will show it as a garbage first character. If the diff looks weird on the first line, suspect BOM.
Number precision. JavaScript parses all JSON numbers as 64-bit floats. If your file has 64-bit integer IDs over 2^53 (= 9,007,199,254,740,992), precision is lost on parse. Our comparator detects this and warns.
Comparing arrays of objects. By default, arrays are compared by index — item 0 to item 0, item 1 to item 1. For arrays of records (identified by an id field), use the key-based comparison mode: pair up items by the id field, then compare each pair.

Related JSON Tools

JSON Diff Online — the paste-based diff for when you have the two JSONs in strings, not files.
JSON Merge Online — merge differences back into a single JSON file.
JSON Formatter — pretty-print and validate before comparing.
JSON Schema Validator — validate both files against the same schema to confirm structural compatibility.