Opens a JSON file as an interactive node graph, side-by-side with the editor,
and keeps both in sync. Same engine as the standalone json-visualizer/index.html
(the webview loads that exact code) wrapped in a VS Code panel.
Features
- Graph + editor in a panel beside your file.
- Two-way sync with the document: edits in the graph or the panel's text box
update the VS Code document (and vice-versa). Save with
⌘S/Ctrl+S. - Edit on the graph: click a value to change it,
+to add fields/nested objects/arrays,×to delete. Type-changes ask for confirmation. - Search, collapse/expand, zoom/fit, error locator — all as in the web app.
- Export (JSON pretty/minified, YAML, CSV) through VS Code's Save dialog.
Run it (development)
- Open this folder (
json-visualizer-vscode/) in VS Code. - Press F5 ("Run Extension"). A second VS Code window (Extension Development Host) opens with the extension loaded.
- In that window, open any
.jsonfile, then run Open in JSON Visualizer from the Command Palette (⇧⌘P), the editor title bar, or the file's right-click menu.
Package / install locally
npm install -g @vscode/vsce
cd json-visualizer-vscode
vsce package # produces json-visualizer-0.5.0.vsix
Then in VS Code: Extensions panel → ··· → Install from VSIX… → pick the file.
How it works
extension.js (the host) creates a webview panel, injects the media files with a
CSP + nonce, and bridges messages: it hands the document text to the webview, applies
the webview's edits back to the document with a WorkspaceEdit, pushes external
edits into the webview, and handles Export via showSaveDialog. media/visualizer.*
is the app; media/visualizer-bridge.js is the thin webview-side glue.
The media/* files are generated from json-visualizer/index.html — regenerate
them from that source if you change the standalone app.
Not yet done
- Registering as a custom editor (so double-clicking a
.jsonopens the graph directly) — currently it's an explicit command. - Bundling/minification for publishing to the Marketplace.