jsoncrack.com/apps/vscode

---

JSON Crack's Official Visual Studio Code Extension that visualizes JSON data as an interactive diagram. The extension parses the open JSON file and displays its structure as a connected graph where nodes represent objects, arrays, and values.

How to use?

1. Install the JSON Crack extension from the VS Code marketplace.
2. Open a JSON file.
3. Click on the JSON Crack icon in the menubar at top right.

Privacy

The extension works fully offline. No data is sent to any server. All JSON parsing and visualization happens locally in your editor.

Development

This extension lives in apps/vscode inside the jsoncrack.com monorepo.

Prerequisites: Node.js >=20, pnpm >=10

Stack: Vite (webview) + esbuild (extension host) + React 19

# Install dependencies from repo root
pnpm install

# Build the extension
cd apps/vscode
pnpm run build

Debugging

1. Open the monorepo root in VS Code.
2. Press F5 to launch the "Run VSCode Extension" config — it builds and opens the Extension Development Host.
3. After making changes, press Cmd+R (macOS) / Ctrl+R (Windows/Linux) in the host window to reload.

Scripts

Script	Description
build	Production build (minified, no sourcemaps)
build:dev	Dev build (sourcemaps, no minification)
watch	Watch extension host (ext-src/) for changes
watch:webview	Watch webview (src/) for changes
dev	Start Vite dev server (standalone webview in browser)
lint	Run ESLint + Prettier check
clean	Remove build/ directory