Skip to content

JSON Diff Viewer

Compare two JSON documents side by side with structural and character-level diffing.

Updated

What is the JSON Diff Viewer?

The JSON Diff Viewer is a powerful, client-side tool designed to help developers compare two JSON documents and instantly identify the differences. Whether you are debugging API responses, auditing configuration files, or validating data migrations, this tool provides a clear, structural breakdown of what changed.

Unlike basic text comparators, this tool understands JSON structure. It parses your inputs and performs a deep, recursive comparison. You can choose between a Side-by-Side view for traditional visual alignment, an Inline view for a unified diff, or a Changes List that maps every addition, deletion, and modification to its exact JSON path (e.g., users[0].name).

Key Features

  • Structural Diffing: Understands objects and arrays, not just text lines.
  • Character-Level Highlighting: See exactly which characters were modified within a changed string.
  • Smart Array Comparison: Uses Longest Common Subsequence (LCS) to align array elements and detect moves, rather than just comparing by index.
  • Flexible Options: Ignore key order, ignore case, or ignore whitespace in strings to get a true semantic comparison.
  • Export & Share: Download structured diff reports as JSON or copy unified text diffs to your clipboard.
  • 100% Private: All comparisons happen entirely in your browser. No data is ever sent to a server.

How it works

The JSON Diff Viewer uses a multi-layered approach to provide accurate and readable comparisons.

  1. Parsing & Validation: Both JSON inputs are parsed using a safe, strict parser. If syntax errors are found (like trailing commas or unquoted keys), the tool highlights the exact line and displays a human-readable error message before any diffing occurs.
  2. Structural Diffing: The tool traverses both JSON trees recursively. It compares objects key-by-key and arrays element-by-element. If "Ignore Key Order" is enabled, it sorts keys before comparison to ensure {"a":1,"b":2} and {"b":2,"a":1} are treated as identical.
  3. Array Alignment (LCS): When comparing arrays, the tool can use Longest Common Subsequence (LCS) to find the optimal alignment of elements. This means if an item is inserted at the beginning of an array, it shows as one insertion, rather than every subsequent item showing as modified.
  4. Line Diffing: For the visual side-by-side and inline views, the pretty-printed JSON strings are run through a line-level LCS algorithm. This aligns matching lines so you can easily see where additions and deletions occurred.
  5. Character-Level Diffing: When a line is marked as "modified," the tool performs a character-level diff to highlight exactly which parts of the string changed, making it easy to spot typos or small value changes.
  6. Filtering & Rendering: The results are formatted into the selected view mode (Side-by-Side, Inline, or Changes List) with options to hide unchanged lines and limit context for faster scanning.

Examples

Compare API Responses

Identify differences between two API JSON responses to debug issues.

{"user":{"id":1,"name":"Alice","role":"admin"},"active":true}
 
{"user":{"id":1,"name":"Alice","role":"super_admin"},"active":true,"last_login":"2024-01-01"}

Config File Audit

Find added or removed configuration keys between two JSON files.

{"theme":"dark","fontSize":14,"language":"en"}
 
{"theme":"dark","fontSize":16,"language":"en","timezone":"UTC"}

Frequently asked questions

How does the JSON Diff Viewer handle arrays?

By default, the tool uses a "Smart" (LCS - Longest Common Subsequence) algorithm to compare arrays. This means it looks for matching elements and aligns them, so an insertion at the beginning of an array only shows as a single addition. You can switch to "Index" mode in the options to compare arrays strictly by their numerical position.

Can I ignore the order of keys in JSON objects?

Yes. JSON technically doesn't guarantee key order, but some tools are sensitive to it. You can toggle "Ignore key order" in the Comparison options. When enabled, the tool sorts keys internally before comparing, ensuring that {"a":1,"b":2} and {"b":2,"a":1} are recognized as identical.

Does the tool support character-level diffing?

Yes. When a line of JSON is modified (e.g., a string value changes), the tool highlights the specific characters that were added or removed, rather than just marking the entire line as changed. This makes spotting small typos or value changes much easier.

Is my JSON data secure when using this tool?

Absolutely. The JSON Diff Viewer runs entirely 100% client-side in your browser. Your JSON data is never uploaded to any server, stored in a database, or sent over the network. It is safe to use with sensitive or private data.

What happens if my JSON is invalid?

If you paste invalid JSON, the tool will catch the syntax error. It displays a clear error message indicating what went wrong (e.g., "Unexpected token" or "Trailing comma") and highlights the exact line number in the editor where the error occurred, so you can fix it immediately.

Can I export the differences found?

Yes. You can copy a unified text diff to your clipboard, or download a structured JSON diff report. The report includes a summary of additions, deletions, and modifications, along with the exact JSON path for every change.

Related tools

More utilities you might find handy.

Developer

.env File Generator

Generate .env files from key-value pairs with configurable quoting; verify the output with the parser used by your application.
Developer

.htaccess Redirect Builder

Generate Apache .htaccess rules for common redirects, HTTPS enforcement, and canonical URL routing; review and test before deployment.
Developer

ASCII Converter – Text to ASCII, Hex, Binary & Back

Convert text to ASCII codes and decode back in decimal, hex, binary, or octal — live, private, and 100% browser-based.