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 Compare & Diff

• Multi-panel comparison — compare 2 or more JSON objects at the same time
• Deep nested diff — flattens nested objects and arrays into dot-notation paths (e.g. user.address.city) for precise, line-level comparison
• Array diff support — detects differences inside arrays, not just top-level keys
• Status classification — every path is clearly labelled: Same, Different, Added, Removed, or Missing
• Live filter bar — filter diff results by status with live counts per category
• Path search — instantly search and narrow down results by key path
• N-way diff — compare more than 2 JSON files simultaneously in a single view
• Format JSON — prettify any panel with one click
• Copy JSON — copy any panel's content to clipboard instantly
• Rename panels — click the label to give each panel a meaningful name

JSON Merge

• Deep merge — merges all JSON panels recursively into one clean output
• Key filter merge — enter comma-separated field names to extract only those keys from each panel before merging (e.g. id,name,role)
• Array merge by key — when panels contain arrays of objects, match and merge items using a composite key across all arrays
• 5 sort modes for the merged output: A→Z, Z→A, Key→{}→[], {}→[]→Key, []→{}→Key
• Live re-sort — switch sort mode instantly without re-running the merge
• Add merged result as panel — push the merged JSON back as a new input panel to keep working

Usage

Comparing

1. Paste JSON into each panel
2. Click Compare All
3. Use the filter tabs or search bar to explore differences

Merging

1. Paste JSON into each panel
2. (Optional) Enter comma-separated field names in the Filter keys input (e.g. id,name,role)
3. Click Merge All
4. Use the sort buttons to reorder keys in the merged result
5. Copy the result or click + Add as Panel to keep editing

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.0 — Initial Release

Compare

• 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
• Redesigned dark UI with gradient accents and smooth animations

Merge

• Merge All — deep merges all panels into one combined JSON output
• Key filter merge — enter comma-separated field names to extract only those keys before merging
• Array merge by composite key — match and merge array items across panels by one or more key fields
• 5 sort modes for merged output: A→Z, Z→A, Key→{}→[], {}→[]→Key, []→{}→Key
• Live re-sort — switch sort mode instantly without re-running the merge
• Copy merged result to clipboard with one click
• Add merged result as a new input panel