🔀 JSON Comparator

Deep diff two JSON objects — colour-coded, filterable, fully expandable tree.

Paste JSON in both panels
Compare two objects side by side.🔒 100% Private
ORIGINAL
MODIFIED

About JSON Comparator

When API responses change between versions, when environment configs drift, or when a backend refactor modifies nested data structures, you need a tool that can precisely show what changed — not just that something changed. This JSON Comparator performs a deep structural diff of two JSON objects and presents the result as a colour-coded interactive tree: green for added fields, red for removed fields, blue for changed values, and neutral for unchanged ones.

Unlike simple text diff tools, this comparator understands JSON structure. It recognises that{"a":1,"b":2} and {"b":2,"a":1} are semantically identical. The Ignore Array Order option extends this to arrays, letting you compare two lists of objects regardless of their order. All processing runs entirely in your browser.

How to compare two JSON objects

  1. Paste JSON A (the original/baseline) into the left panel.
  2. Paste JSON B (the updated/new version) into the right panel.
  3. Click Compare. The diff tree renders instantly with colour-coded results.
  4. Use the filter tabs (All · Added · Removed · Changed · Same) to focus on specific change types.
  5. Toggle Ignore Array Order if your arrays may contain the same items in different positions.
  6. Toggle Sort Keys to normalise key ordering before comparison.
  7. Use Expand All / Collapse All to navigate deep nested structures.

Features

🎨 Colour-coded diff

Green for added, red for removed, blue for changed, neutral for unchanged. Colour runs on the key, old value, and new value columns.

🌲 Interactive tree

Click any object or array node to expand or collapse it. Deep structures stay navigable with Expand All / Collapse All.

🔍 Filter tabs

Instantly filter to show only added, only removed, only changed, or only same fields — or see everything at once.

📊 Summary counts

A count of added, removed, changed, and same fields appears instantly after comparison.

⚙️ Ignore Array Order

Treats arrays as sets — two arrays with the same elements in any order are considered equal.

🔒 100% Private

Nothing is sent to any server. All diff logic runs locally in your browser via JavaScript.

Frequently Asked Questions

How is this different from a plain text diff tool?

A text diff tool compares lines of text character by character. It will flag {"a":1,"b":2} and {"b":2,"a":1} as different even though they are identical JSON objects. This comparator parses both inputs as JSON and compares the data structure semantically — key order doesn't matter unless you specifically care about it.

What does 'Ignore Array Order' do?

By default, arrays are compared positionally — element 0 against element 0, element 1 against element 1. With Ignore Array Order enabled, both arrays are first sorted into a canonical order and then compared positionally, which is what you want when an API returns the same items in a different sequence. It is not element matching: if the two arrays have different lengths, the surplus still shows up as changes rather than as a single insertion or deletion.

Can I compare deeply nested JSON with hundreds of fields?

Yes, up to 512 levels of nesting — past that the comparator says so rather than failing silently, which is far deeper than anything an API or a human produces. Width is unlimited. Use the filter tabs (Added, Removed, Changed) to jump straight to the differences without scrolling through unchanged fields, and Collapse All to fold the tree back down.

What do the three columns in the result mean?

The left column is the key path. The middle column shows the old value (from JSON A). The right column shows the new value (from JSON B). For added fields the old value is blank; for removed fields the new value is blank; for changed fields both are shown so you can see what it was and what it became.

Is my JSON data safe when using this tool?

The comparison itself never leaves your browser — parsing and diffing both run in this tab, and you can verify it by opening DevTools → Network while you click Compare. The one exception is the Save button: saving a comparison to your account deliberately sends both documents to the server so you can restore them later. If you have not clicked Save, nothing has been transmitted.

Developer guide

How to compare JSON objects and detect breaking changes

Two API responses that look similar can hide subtle differences that break consumers in production. A renamed key, a type change from string to number, or a missing field that was never documented as optional can all cause silent failures that are hard to trace back to the root cause.

Braxik's JSON comparator shows you exactly what changed between two JSON documents. It handles nested objects and arrays, highlights additions, deletions, and value changes, and presents the diff in a format that is easy to share in a code review, a post-mortem, or a service contract discussion.

JSON comparison is especially useful when two environments — staging and production, version 1 and version 2, before and after a deployment — return payloads that look identical at a glance but behave differently in code. Pasting both versions here saves the time of mentally diffing complex nested structures.

The comparator is also valuable when working with third-party APIs. When a vendor updates their API, comparing a sample of the old response to the new one shows you exactly which fields were added, renamed, or removed, so you can update your client code before the change causes errors.

How it works

The comparator parses both inputs into JavaScript objects, then performs a deep recursive comparison. At each level of the object tree, it compares keys and values. Missing keys are flagged as deletions, new keys are flagged as additions, and keys whose values have changed are flagged as modifications.

Array comparison checks both element count and element values. A difference in array length is reported as a structural change. Element value differences are reported with their index. For arrays of objects, elements are compared by position rather than by identity, which is the most predictable behaviour for API response diffs.

The result is presented as a colour-coded tree where additions are green, deletions are red, and modifications show the old and new values side by side. This makes it easy to focus on the changed fields without scrolling through unchanged parts of large payloads.

Common uses

  • Compare staging and production API responses after a deployment to confirm that no unintended fields changed.
  • Review webhook contract changes between API versions before updating a consumer service.
  • Check whether a configuration file regenerated by a tool differs from the committed baseline in your repository.
  • Validate that a migration script produces the same output shape as the original endpoint.
  • Compare two serialised Java or Python objects to understand what changed during a data pipeline run.
  • Detect undocumented schema drift between API versions in a third-party integration.
  • Identify extra or missing fields in a translated or localised JSON file before a release.

Before you rely on the result

  • Format both inputs individually before comparing to ensure that whitespace differences do not count as changes.
  • Sort keys in both inputs if order matters — some tools produce JSON with different key orderings that would appear as changes if not normalised.
  • Focus on value type changes (string to number, null to string) not just value differences, because type changes break typed languages silently.
  • Check arrays carefully because element order can be meaningful in APIs that use ordered lists for priority or sequencing.
  • Look for fields that moved from a top-level property to a nested object — these are structural changes that require code updates.
  • When comparing paginated responses, compare a single page at the same offset to avoid differences caused by data changes.
  • Note fields that are present in one response but absent in the other — absence is different from null and requires different handling in most parsers.