JSON Diff
Compare two JSON documents and see every added, removed or changed value with its exact path.
When an API response changes, a config file drifts, or a code review bumps a shared schema, the hard question is not whether something changed - it is exactly what changed and where. This diff tool compares two JSON documents and reports every difference as a precise path, so you can see at a glance that only the retry count moved in services.retry, not the whole file.
Paste the original JSON on the left and the modified JSON on the right, then compare. The tool walks both documents structurally - objects by key, arrays by position - and lists each addition, removal and change with a readable path like $.users[2].name. Nested values are handled at any depth, and array shifts show up as element-level changes rather than a vague "array differs".
The comparison runs entirely in your browser. Your payloads - which may contain tokens, personal data or proprietary schema - are parsed in memory and never transmitted. If the two documents are identical, the tool says so plainly instead of inventing differences from formatting alone.
Features
- Structural comparison of any two JSON documents, nested to any depth.
- Every difference reported as an exact JSON path like $.config.timeout.
- Three change types - added, removed and changed - color-coded in the result.
- Array changes reported per element, so shifted or inserted items are visible individually.
- Compact diff view that groups the values before and after each change.
- Clear message when the two documents are identical.
- Fully offline - documents are parsed locally and never uploaded.
How to Use
- 1
Paste the original document
Put the first version of your JSON in the left pane. It does not need to be formatted - the tool parses it either way.
- 2
Paste the modified document
Put the second version in the right pane. The two can use different formatting and key order; comparison is structural, not textual.
- 3
Compare
Press Compare JSON. The result lists every difference with its path and the value on each side.
- 4
Read the paths
Each path pinpoints the change - $.users[2].role means the third user's role field. Use the before/after values to confirm intent.
Example
Field added and value changed
{
"name": "Box",
"timeout": 3000
} vs {
"name": "Box",
"timeout": 5000,
"retries": 3
}↓
$.timeout changed 3000 → 5000
$.retries added 3Array element inserted
{
"ports": [80, 443]
} vs {
"ports": [80, 443, 8080]
}↓
$.ports[2] added 8080Common Problems
Comparing raw text instead of structure
Two documents that differ only in formatting or key order look different in a text diff but are structurally identical. A structural diff parses both sides and compares values, so whitespace and ordering never produce phantom changes.
Array reordering looks like many changes
When elements move position, an element-wise comparison reports each moved item as a removal plus an addition. That is the honest reading of the data - if order matters, the diff should show it.
Assuming identical keys means identical data
Keys can match while values differ, and values can match while types differ - "3" as a string versus 3 as a number. The diff compares values including type, so a numeric change is never reported as unchanged.
Ignoring type differences
A value that changes from 3 to "3" is a real change even though it looks similar. Because JSON has distinct types, the diff treats a string, a number and a boolean as different values and reports the change.
Diffing huge documents in one shot
For very large files the result list can be long, but each entry is self-contained - a path and the two values - so you can scan, filter or export without re-reading the whole document.
Treating identical documents as "no news"
Sometimes the useful result is exactly that two documents are identical. The tool reports that explicitly, which is itself a verification step for generated files or pipeline outputs.
Technical Details
The diff is structural: both inputs are parsed with JSON.parse, then traversed recursively. Objects are compared by key, arrays by index, and every scalar comparison checks the value and the type together.
Paths follow JSON-pointer-like notation: $.a.b[0].c. Keys that are valid identifiers are joined with dots; keys with special characters use bracket notation so every path is unambiguous.
Array comparison is positional - the element at index i on the left is compared to the element at index i on the right. Inserting an element therefore reports a single addition at that index, while later elements stay aligned unless their values also changed.
Values are serialized with JSON.stringify for display, so nested added or removed structures are shown in full rather than collapsed to "[object Object]".
Everything runs locally in the browser. The two documents are parsed in memory, compared synchronously, and discarded when the page is closed.
Frequently Asked Questions
Why does my diff show changes when the files "look the same"?
Either the values differ invisibly - different whitespace inside a string, a number typed as a string, or different key order - or the arrays are in different positions. Open a changed path and inspect the before/after values to see which.
Does key order affect the result?
No. Objects are compared by key name, not by the order the keys appear. Two documents with identical key/value pairs compare as identical even when the keys are written in different order.
How are nested objects and arrays handled?
Recursively. A change three levels deep inside an array of objects is reported with a full path like $.items[2].config.mode, so you never have to hunt for it manually.
Is my data uploaded anywhere?
Never. The comparison happens entirely in your browser tab. Both documents are parsed in memory and never transmitted, stored or logged.
Can I compare JSON from different sources, like one from an API and one from a file?
Yes - as long as both are valid JSON. Paste the API response in one pane and the file contents in the other. The tool does not care where either side came from.
What counts as "changed" versus "removed then added"?
A value that exists at the same key on both sides is changed when its value or type differs. Removed and added describe a key or index that exists on only one side. The type of each report tells you which case you are looking at.
Data & Privacy
Your data stays in your browser. Nothing is uploaded.
- Processing
- Local
- Upload
- None
- Server Storage
- None
- Account
- Not required
Related Tools
JSON Formatter
Format, validate and beautify JSON directly in your browser.
JSON & Data
JSON Validator
Validate JSON and pinpoint the first error with a line, column and plain-English explanation.
JSON & Data
JSON Minifier
Compress formatted JSON into a single compact line and see exactly how many bytes you save.
JSON & Data
JSON to CSV Converter
Convert a JSON array of objects into a CSV file with automatic headers and proper escaping.
JSON & Data
CSV to JSON Converter
Convert CSV files into a clean JSON array, with optional automatic type detection.
JSON & Data
JSON to TypeScript Converter
Generate TypeScript interfaces or type aliases from a JSON sample, with nested types inferred.
JSON & Data