How to Diff JSON in VS Code and Browser

You can diff JSON in VS Code by opening two files, right-clicking one to select "Select for Compare," and right-clicking the other to choose "Compare with Selected." For quick checks of unsaved payloads or deeply nested structures where line-based diffs are noisy, paste both JSON blobs into a browser-based tool that highlights added, removed, and changed keys structurally.

Why Compare JSON Payloads?

Developers frequently need to diff flat JSON objects for configuration changes, test fixtures, and API response validation. However, the most painful comparisons involve API responses with deep nesting, arrays of objects, and optional fields. A single changed value in a third-level object can break a frontend component or fail a backend validation check.

Comparing these structures manually is error-prone. You need to see exactly which keys were added, which were removed, and which values changed, while ignoring formatting differences like whitespace or key order. This is critical when debugging integration issues between services where one side sends a slightly different schema than expected.

Native VS Code Diff: The Quick Way

VS Code includes a built-in diff viewer that works well for two files on your disk. It does not require any extensions.

1. Open two JSON files in separate tabs or split panes.
2. Right-click the first file in the Explorer sidebar and choose Select for Compare.
3. Right-click the second file and choose Compare with Selected.

VS Code opens a side-by-side diff view. Lines with changes are highlighted in blue, additions in green, and deletions in red. You can click the arrows at the top of the diff pane to jump between changes.

Handling Unformatted JSON

If your JSON is minified (one long line), the native diff will show the entire line as changed, which is useless. Before comparing, format both files. Press Shift+Alt+F (Windows/Linux) or Shift+Option+F (macOS) to format each file using the default JSON formatter. Ensure both files use the same indentation settings (e.g., 2 spaces) so the diff aligns correctly.

Limitations of Editor-Based Diffs

The native VS Code diff is line-based, not structure-aware. This causes two specific problems with JSON:

1. Key Order Sensitivity: If two JSON objects have the same data but keys are in a different order, VS Code may show multiple lines as changed even though the data is identical. You must sort keys manually or use an extension to normalize order before diffing.
2. Deep Nesting Visibility: When a change occurs inside a nested object, the diff shows the entire parent object as modified if the indentation or line breaks shift. You cannot easily collapse or expand just the changed subtree in the native view without scrolling extensively.

For quick checks of two API responses pasted from a browser console or Postman, setting up files, saving them, and selecting them for compare is slower than pasting into a dedicated diff tool.

Using JSONForge for Deep Nested Diffs

When you need to compare two large, nested JSON payloads quickly, JSONForge provides a two-payload diff view that highlights every added, removed, or changed key. It works on deeply nested structures and runs client-side in your browser.

The tool parses both JSON blobs, normalizes key order, and compares them structurally rather than line-by-line. This means reordered keys are ignored, and only actual data changes are flagged. You can paste both payloads directly from your clipboard without formatting them first.

Step-by-Step: Diffing Two API Responses

Here is a realistic example comparing two user profile objects. The second payload has a changed zip_code, a removed phone field, and a new last_login field.

Payload 1 (Original):

{
  "id": 101,
  "name": "Jane Doe",
  "address": {
    "street": "123 Main St",
    "city": "Springfield",
    "zip_code": "62704",
    "phone": "555-0199"
  },
  "active": true
}

Payload 2 (Changed):

{
  "id": 101,
  "name": "Jane Doe",
  "address": {
    "street": "123 Main St",
    "city": "Springfield",
    "zip_code": "62705"
  },
  "active": true,
  "last_login": "2023-10-27"
}

1. Open the diff view in JSONForge.
2. Paste Payload 1 into one pane and Payload 2 into the other.
3. Select the diff tool.

The tool highlights the following changes:

• address.zip_code: Changed from "62704" to "62705".
• address.phone: Removed (present in the first payload, missing in the second).
• last_login: Added (missing in the first payload, present in the second).

All other keys (id, name, address.street, address.city, active) are shown as identical, even if their order differed in the raw input.

Interpreting Added, Removed, and Changed Keys

The diff view uses color coding and symbols to distinguish change types. Understanding these helps you triage issues faster.

Handling Arrays

For arrays, diff algorithms typically attempt to match elements by content or unique identifiers when available, falling back to index comparison if no clear match is found. If you have an array of objects and one object is added at the end, the tool will show the new element as added. If an object in the middle is modified, only that element is flagged as changed. If elements are reordered, the diff may show multiple changes even if the set of objects is the same. For array-heavy data, consider sorting the array by a unique ID before diffing if your tool does not support key-based array matching.

When to Use Which Tool

It integrates with Git and allows you to edit the files directly from the diff view.

It is particularly useful for one-off comparisons where you want to avoid creating temporary files.