JSON Visualizer — VS Code extension

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)

1. Open this folder (json-visualizer-vscode/) in VS Code.
2. Press F5 ("Run Extension"). A second VS Code window (Extension Development Host) opens with the extension loaded.
3. In that window, open any .json file, 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 .json opens the graph directly) — currently it's an explicit command.
• Bundling/minification for publishing to the Marketplace.