devtools

JSON Diff

Compare two JSON documents structurally and see every added, removed, and changed value by path. Ignores key order and formatting. Private and in-browser.

Runs entirely in your browser — your data never leaves your device.

How to use JSON Diff

What it does & when you need it

Two JSON documents look nearly the same, and you need to know precisely what changed: an API response before and after a deploy, a config file across two environments, or a fixture that a test suddenly disagrees with. A plain text diff is useless here — reindent the file or reorder a few keys and every line lights up red. This tool parses both sides and compares the values, so it only reports real structural changes. Everything runs in your browser, so a payload full of tokens or customer data never leaves your machine.

How to use

  1. Paste the original document into buffer A and the changed one into buffer B, or press Sample on A to load a before/after pair.
  2. Read the diff panel below. A + line is a key or element that appears only in B, a - line appears only in A, and a ~ line is a value that changed, shown as old → new.
  3. Press Copy diff or Ctrl/Cmd + Enter to copy the report.

Things worth knowing

Key order and whitespace are ignored. Because both sides are parsed first, {"a":1,"b":2} and {"b":2,"a":1} are reported as identical. Reformatting, indentation, and trailing-comma-free reserialization produce zero noise — only a different value, a new key, or a removed key shows up.

Paths are dotted, arrays are indexed. A change nested inside an object reads like ~ limits.rps: 100 → 150, and an array element reads like + features[2]: "webhooks". That makes it easy to jump straight to the field in your source.

A type change is a single line. If a field goes from the number 42 to the string "42", you get one ~ line rather than a delete plus an add, so accidental stringification is obvious at a glance.

It compares arrays positionally. Element [0] is compared with element [0], so inserting an item near the front reports every later index as changed. For line-oriented text or prose, reach for the diff checker instead; to tidy either side first, use the JSON formatter.

Examples

Version bump and a new array item

{"name":"api","version":"1.0.0","tags":["beta"]}
=== compare with ===
{"name":"api","version":"1.1.0","tags":["beta","stable"]}

Reports ~ version changed and + tags[1] added, while the unchanged name stays silent.

A field changes type

{"port":8080,"debug":true}
=== compare with ===
{"port":"8080","debug":false}

The number-to-string change on port and the boolean flip on debug each show as a single ~ line.

Nested object add and change

{"db":{"host":"localhost","pool":5}}
=== compare with ===
{"db":{"host":"db.internal","pool":5,"ssl":true}}

Recurses into db to report ~ db.host and + db.ssl; the unchanged pool is ignored.

Frequently asked questions

How is a JSON diff different from a plain text diff?

A text diff compares lines of characters, so reindenting a file or reordering keys lights up as a change even though the data is the same. This tool parses both sides first and compares the actual values, so only a different value, an added key, or a removed key is reported.

Does key order affect the result?

No. Objects are compared by key, not position, so {"a":1,"b":2} and {"b":2,"a":1} are treated as identical. Arrays are the exception — they are compared by index, because order is meaningful in a JSON array.

How do I read the +, - and ~ lines?

A line starting with + is a key or array element present only in the B document, a line starting with - is present only in A, and a ~ line is a value that changed, shown as old → new. Each line includes a dotted path such as limits.rps or features[2].

What happens when a value changes type?

A field that goes from the number 42 to the string "42" is reported as one ~ change, not a delete plus an add. That makes accidental stringification — a common serialization bug — easy to spot.

Why does inserting one array item flag everything after it?

Arrays are compared positionally: index 0 against index 0, index 1 against index 1, and so on. Inserting an element near the front shifts every later element to a new index, so each one reads as changed. Append to the end to keep the diff minimal.

Is my JSON uploaded anywhere?

No. Both documents are parsed and compared entirely in your browser, so a response full of tokens or personal data never leaves your machine, and the tool keeps working offline once the page has loaded.

Related tools

Text Diff CheckerCompare two blocks of text or code online and see added, removed, and unchanged lines instantly. A free, private line diff that runs in your browser.JSON Formatter & ValidatorFormat, validate and minify JSON in your browser. Pretty-print with 2/4-space or tab indent, sort keys, and get parse errors with the exact line and column.JSON to TypeScriptGenerate TypeScript interfaces from any JSON in your browser: nested objects, arrays, union types, optional keys, and null-aware fields. Private, no uploads.YAML ⇄ JSON ConverterConvert YAML to JSON and JSON to YAML instantly in your browser. Free, private, and offline-capable, with clear parse-error reporting and no uploads.JSON to CSV ConverterConvert a JSON array of objects to CSV with RFC 4180 quoting, custom delimiters, unioned columns, and JSON-stringified nested values. Private, no uploads.