Visualize and edit any .json or .jsonc file with interactive Tree, Column (macOS Finder-style), or Table (Key-Value) views, right beside your VS Code editor.
Features
Three Switchable View Modes:
Tree View — Hierarchical collapsible tree auto-expanded two levels deep, with child count badges, type syntax coloring, and Expand/Collapse All controls.
Column View — macOS Finder-style multi-column drill-down with independent resizable columns, child count badges (438 ›), inline scalar previews, active blue row selection, and a right-side inspector pane.
Table View — Key-Value flex layout with distinctive grey key headers, nested collapsible tables, and auto-unioned grid headers for arrays of objects.
Interactive Inline Editing & Key Renaming:
Double-click any key or value to edit in place.
Automatic type parsing (boolean, number, null, string).
Native VS Code WorkspaceEdit integration with full Undo/Redo (Cmd+Z / Ctrl+Z) support.
Dynamic Responsive Layout:
Automatically scales and wraps content to fit side-by-side split editors or resized windows.
Theme-Aware:
Fully adaptive to Light, Dark, High Contrast, and custom VS Code color themes.
Native Editor Integration:
Click the $(json) ({ }) button in the editor title bar or run JSON Explorer: Visualize JSON from the Command Palette.
Usage
Open any .json or .jsonc file in VS Code.
Click the $(json) ({ }) icon in the editor tab bar (top right) or press Cmd+Shift+P $\rightarrow$ JSON Explorer: Visualize JSON.
Switch between Tree, Column, and Table modes using the top toolbar.
Double-click any key to rename it, or double-click any value to edit it.
Building from source
npm install
npm run compile # builds dist/extension.js and dist/webview/main.js
npm test # runs the 44-test unit/component suite
npx vsce package # builds json-explorer-viewer-<version>.vsix
