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, merge JSON objects with smart deep-merge logic, and explore any JSON structure interactively — 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

Two Modes

Switch between Compare and View JSON using the mode bar at the top.

• ◑ Compare — paste multiple JSON inputs, diff them, and merge them
• 🔍 View JSON — paste JSON across multiple tabs, explore interactively, and compare between tabs

JSON Input Panels — CodeMirror Editor

Each JSON input panel now uses a full CodeMirror editor with:

• Syntax highlighting — keys, strings, numbers, booleans, and null in distinct colors
• Line numbers in the gutter
• Code folding — click the ▶ arrow in the gutter to collapse any object or array to a single inline { ↔ } marker; click again to expand
• Fixed panel height with scrolling — panels stay a consistent size regardless of JSON length; scroll inside the editor for large files

Per-panel action buttons in each panel header:

The action bar below the panels:

• + Add JSON — add more panels to compare
• ▶ Compare All — run a deep diff across all panels
• Filter keys — optionally filter which keys are included in the merge
• ⊕ Merge All — deep-merge all panels into one output
• × Clear All — reset all panels and results

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.

Key / Value Search

After running Compare All, a Key / Value toggle and search box appear in the action bar.

• Key — filter diff rows by key path (e.g. profile.firstName)
• Value — filter diff rows by the actual value content (e.g. "Vignesh")
• Default (neither selected) — searches both key paths and values simultaneously

View JSON Mode — Chrome-style Tabs

Switch to View JSON mode to explore JSON across multiple tabs, each with its own independent editor.

Tab Bar

• Chrome-style tabs — each tab has a color-coded dot and label
• + button — add a new tab directly from the tab bar
• × close button — remove a tab (appears on hover; hidden when only one tab remains)
• Tab state preserved — switching tabs saves and restores each tab's editor content, explore tree, search query, and match navigation position independently

Per-Tab Editor

Each tab has a full CodeMirror editor with:

• Syntax highlighting, line numbers, and gutter fold arrows
• Fixed height with internal scrolling — large JSON files never push the layout

Per-tab action buttons in the panel header:

Explore & Search

• ▶ Explore — parse the active tab's JSON and render it as a collapsible key/value tree showing types, counts, and values at every level
• × Clear Tab — clear the active tab's editor and results
• Match count and navigation pill (1 / 5) appear in the toolbar next to the buttons as soon as results are found — no need to scroll down
• Key / Value toggle — search the tree by key name, by value, or both
• ↑ ↓ navigation — jump between matches directly from the toolbar

Each tab remembers its own explore tree and search state — switching tabs restores the exact results for that tab.

JSON Merge

Click Merge All to deep-merge all panels into a single combined JSON output.

Smart merge behaviour:

• Objects — deep-merged recursively; keys from all panels are combined
• Arrays — concatenated across panels

Sort modes for the merged output:

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

Merge Filters

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

Supports dot-notation paths — for example, _id,Data.mulExamary,Err will:

• Pick _id and Err from the top level
• Navigate into Data (even if it's an array of objects) and pick only mulExamary

Array merge by composite key — when all panels contain top-level arrays of objects, the key field(s) you enter are used to match and merge items by that key across arrays.

Auto JSON Conversion

JSON Diff Studio automatically converts common non-JSON syntax on paste so you can skip manual cleanup:

Usage

Opening JSON Diff Studio

Comparing JSON

1. Paste JSON into each panel — valid JSON ✓ confirms it's ready
2. Click ▶ Compare All
3. Use the filter tabs (All / Different / Added / Removed / Same) to explore differences
4. Use the Key / Value toggle and search to narrow results

Merging JSON

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

Exploring JSON in View Mode

1. Switch to View JSON mode
2. Paste JSON into the editor — use the fold arrows to collapse sections
3. Add more tabs with + to work with multiple JSON documents simultaneously
4. Click ▶ Explore to render the interactive tree
5. Use the Key / Value toggle and search to find fields — navigate matches with ↑ ↓ in the toolbar

Requirements

• VS Code ^1.85.0

Extension Settings

This extension does not contribute any settings.

Stay Updated

Follow ThrottleWorks on LinkedIn to get notified about future product launches, updates, and releases:

Follow ThrottleWorks on LinkedIn

Rate & Review

If you use JSON Diff Studio, please take a moment to rate and review it on the VS Code Marketplace — it makes a real difference.

Your review helps shape future development. Tell us:

• What you like about it (what's working well)
• What you don't like or find missing (what could be better)
• Any features you'd love to see next

Rate JSON Diff Studio on the Marketplace

Every rating and review is read and appreciated. Thank you!

Release Notes

1.0.5 — Latest

• CodeMirror editor in input panels — replaced plain textareas with full CodeMirror editors; each JSON input panel now has syntax highlighting, line numbers, gutter fold arrows, and internal scrolling for large JSON files
• Per-panel code folding — click the fold icon in any panel header to fold/unfold all objects and arrays at once; click individual ▶ arrows in the gutter to fold specific sections
• Chrome-style tabs in Compare mode — multiple independent compare sessions (Tab 1, Tab 2 …); each tab has its own panels, diff results, merge output, filter state, and search; add tabs with +, close with ×; tabs renumber automatically after close
• Chrome-style tabs in View JSON mode — multiple independent tabs, each with its own CodeMirror editor, explore tree, and search state; add tabs with +, close with ×
• Per-tab state preservation — switching tabs in both Compare and View JSON modes saves and fully restores editor content, results, search query, and match navigation independently per tab
• Redesigned toolbar layout — View JSON toolbar split into two logical groups: action buttons (Explore, Clear Tab) on the left; search controls (Key/Value toggle, search box, match count, nav pill) grouped on the right
• Match count and nav pill in toolbar — 5 matches badge and 1 / 5 navigation appear inline in the toolbar, visible at all times while searching
• Redesigned panel headers — SVG icon buttons (fold, format, copy, trash, remove) with consistent hover states and an active-state highlight for the fold toggle
• Bulk data performance — debounced search inputs (180 ms) in both modes; diff table built with DocumentFragment for single-pass DOM insertion; diff rows capped at 5,000 with an inline notice; explore tree capped at 2,000 nodes with an inline notice; flatten depth guard prevents stack overflow on deeply nested JSON
• Full responsive layout — five breakpoints: large desktop (1400px+), tablet landscape (1024px), tablet portrait (768px), mobile (480px), small mobile (360px); every section — panels, tabs, toolbar, action bar, filter bar, table, merge — adapts cleanly at each size
• Dead code removal — removed unused handleJsonEdit, legacy viewEditor variable, and redundant CSS (cm-wrap orphan rules)

1.0.4

• View JSON mode — dedicated mode for exploring a single JSON document; CodeMirror editor with syntax highlighting, code folding, and line numbers; click Explore to render a collapsible key/value tree
• Separate Added / Removed filter tabs — split from "Added / Missing" into distinct tabs with accurate counts
• Key / Value search toggle in Compare mode — search diff results by key path or value
• Key / Value search toggle in View JSON mode — search the explored tree with match count and ↑ ↓ navigation
• Smart array merge — arrays concatenate and objects deep-merge automatically
• Dot-path merge filter — supports nested paths like _id,Data.mulExamary,Err

1.0.3

• Relaxed JSON input — unquoted keys accepted alongside standard quoted keys
• 6 type-based sort modes — all permutations of Key / {} / []
• Sort bug fix — changing sort mode after key-filtered merge re-applies the filter correctly
• Clear All resets the merge filters input
• Responsive UI — layout adapts across desktop, tablet, and mobile

1.0.2

• Version bump and minor fixes

1.0.1

• Renamed to JSON Diff Studio
• Merge filters input for key-based merge control
• Array merge by composite key
• 5 sort modes with live re-sort
• Copy merged result to clipboard
• Add merged result as a new input panel

1.0.0 — Initial Release

• Multi-panel JSON comparison
• Deep nested diff with dot-notation paths
• Status classification: Same, Different, Added, Removed
• Filter bar with live counts
• N-way diff across more than 2 panels
• Add / remove panels dynamically
• Per-panel actions: Format, Copy, Clear, Remove
• Rename panels by clicking the label