JSON Diff Studio — Compare, Diff & Merge JSON in VS Code

Author: Vignesh B | Publisher: ThrottleWorks

JSON Diff Studio is a powerful JSON comparison and merge tool built for VS Code. Compare multiple JSON files side by side, instantly spot differences with deep nested diff and array support, and merge JSON objects using flexible key-based strategies — all without leaving your editor.

Whether you are debugging API responses, reviewing configuration changes, merging environment files, or validating data pipelines, JSON Diff Studio gives you a clear, structured view of exactly what changed and where.

Features

JSON Input Panels

Paste your JSON into any panel and get instant validation feedback. Each panel has a color-coded dot, a live status bar (empty / valid JSON ✓ / Invalid JSON ✗), and per-panel action buttons in the header.

The action bar below the panels gives you full control:

• + Add JSON — add more panels to compare
• ▶ Compare All — run a deep diff across all panels
• Merge filters — optionally filter which keys are included in the merge (e.g. id,name,role)
• ⊕ Merge All — deep-merge all panels into one output
• × Clear All — reset all panels and results
• Filter paths... — search and narrow diff results by key path

Per-panel actions in each panel header: | Button | Action | |---|---| | ⎘ | Copy panel JSON to clipboard | | { } | Format / prettify the JSON | | ⌫ | Clear panel content | | ✕ | Remove the panel |

Compare & Diff

Click Compare All to run a deep diff. Results are displayed in a table with a Path column, one column per JSON panel (color-coded to match the panel dot), and a Status badge.

Every key path across all flattened JSON structures is classified:

The filter bar shows live counts per category. Click any tab to narrow the table instantly.

In the example above, the Missing filter is active, showing 44 paths (like system, company, employees[0].empId) that exist in JSON 1 but are absent in JSON 2, displayed as -- not present --.

Path Search

Use the Filter paths... search box (top right of the action bar) to instantly narrow the diff table to any key path as you type.

In the example above, typing company filters the entire diff table down to just the company row — showing "TechCorp" in JSON 1 and -- not present -- in JSON 2 with a Missing status.

JSON Merge

Click Merge All to deep-merge all panels into a single combined JSON output. The merged result appears below the action bar with full sort control.

Sort modes for the merged output:

Alphabetical:

Type-based (all 6 permutations of primitives / objects / arrays):

Switch sort modes at any time — the output re-sorts instantly without re-running the merge.

After merging:

• Copy — copy the merged JSON to clipboard
• + Add as Panel — push the merged result back as a new input panel to continue working

Merge Filters

Type comma-separated key names into the Merge filters input to extract only those fields from each panel before merging.

In the example above, entering system,platform,company limits the merge to only those three keys — producing a clean, focused output with just company, platform, and system from both panels combined.

This also supports array merge by composite key: when all panels contain arrays of objects, the key field(s) you enter are used to match and merge items across arrays (e.g. entering id merges array items that share the same id).

Usage

Comparing JSON

1. Paste or type JSON into each panel — the status bar shows valid JSON ✓ when ready
2. Click ▶ Compare All
3. Use the filter tabs (All / Different / Added / Removed / Missing / Same) to explore differences
4. Type in Filter paths... to jump to a specific key

Merging JSON

1. Paste JSON into each panel
2. (Optional) Enter comma-separated field names in Merge filters to limit which keys are included
3. Click ⊕ Merge All
4. Use the sort buttons to reorder the merged output
5. Click Copy or + Add as Panel to use the result

Requirements

• VS Code ^1.85.0

Extension Settings

This extension does not contribute any settings.

Feedback

We'd love to hear from you! Share your thoughts, suggestions, or bug reports using the link below.

Give Feedback

Release Notes

1.0.3 — Latest

• Relaxed JSON input — unquoted keys (e.g. id: 101, name: "Vignesh") now accepted alongside standard quoted keys
• 6 type-based sort modes added — all permutations of Key / {} / [] (previously only 3)
• Sort bug fix — changing sort mode after a key-filtered merge now correctly re-applies the filter instead of doing a plain full merge
• Clear All now also resets the Merge filters input field
• Responsive UI — layout adapts compactly across desktop, tablet and mobile screen sizes
• Fixed { } format button and ✕ remove button misalignment in panel header

1.0.2

• Version bump and minor fixes

1.0.1

• Renamed to JSON Diff Studio
• Merge filters input for key-based merge control
• Panel textarea fix — fills panel height, footer always pinned to the bottom
• Key filter merge — comma-separated field names to extract keys before merging
• Array merge by composite key — match array items across panels by key field(s)
• 5 sort modes: A→Z, Z→A, Key→{}→[], {}→[]→Key, []→{}→Key
• Live re-sort without re-running the merge
• Copy merged result to clipboard
• Add merged result as a new input panel

1.0.0 — Initial Release

• Multi-panel JSON comparison — compare 2 or more JSON objects at once
• Deep nested diff — flattens objects and arrays into dot-notation paths
• Status classification: Same, Different, Added, Removed, Missing
• Filter bar with live counts per status category
• Path search bar to filter diff rows by key name
• N-way diff — compare more than 2 JSON panels simultaneously
• Add / remove panels dynamically; panels auto-renumber on removal
• Per-panel actions: Format JSON, Copy JSON, Clear, Remove
• Rename panels by clicking the label
• Tab-key indentation support inside textarea
• Sticky table header during scroll