Prism JSON

The JSON visualization suite VS Code was missing.

Tree · Table · Graph · Diff · API Inspector · JSONPath Query Panel

Why Prism JSON?

Features at a glance

Tree View — navigate any depth, instantly

• Virtual scroll renders only on-screen rows — 100 000-node trees stay at 60 fps
• Expand / collapse individual nodes or everything at once
• Search with auto-ancestor expansion so the match is never hidden
• Click any value to copy its JSONPath ($.users[0].email) to clipboard
• Indent guide lines, type badges (str / num / bool / null / arr / obj) on hover
• Arrow-key keyboard navigation — no mouse required

Table View — your JSON as a spreadsheet

• Flattens any JSON array of objects into a sortable, filterable table
• Sort any column ascending / descending
• Filter rows with a free-text search across all visible columns
• Paginate large datasets (25 / 50 / 100 rows per page)
• Export to CSV with one click
• Query-matched rows highlighted in teal — cross-view sync with the Query Panel

JSONPath Query Panel — DevTools console for JSON

• Type any JSONPath expression ($.users[?(@.age > 30)]) and see results live (150 ms debounce)
• Matched nodes are highlighted simultaneously in the Tree view and Table view — no tab switching
• Tree auto-expands all ancestor paths so every match is visible
• Save queries with a custom name and color — persists across sessions via workspace state
• Query history (50 entries) — navigate with ↑ / ↓ in the input
• Activity Bar sidebar shows all saved queries at a glance; click any to run it instantly
• Handles 5 000+ matches with a performance cap and user warning

Graph View — see the shape of your data

• Hierarchical SVG tree with pan and zoom
• Capped at 3 levels by default to keep rendering fast on deep structures
• Color-coded by node type
• Hover any node to see its full value in a tooltip

Diff View — structural change detection

• Compare any two open JSON files — select from all open editors
• Off-thread structural diff powered by the same Web Worker as the tree view
• Summary: added / removed / modified / unchanged key counts
• Change markers on every affected path so you see exactly what moved

API Inspector — fetch + visualize in one step

• Enter any URL, add custom headers, choose auth (Bearer, Basic, API Key, none)
• Auto-refresh on a configurable interval (5 s / 30 s / 1 min / 5 min)
• Response opens directly in the Tree view — JSONPath queries work on live API data too
• Full request history for the session

Performance

JSON parsing, flattening, querying, and diffing all run in a dedicated Web Worker — the VS Code UI thread is never blocked.

Hard-cancel semantics: if a new file arrives while a large parse is in progress, the worker is terminated and replaced — no zombie parses.

Quick start

Open any .json or .jsonc file, then:

All commands are also available via the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) — search Prism JSON.

Right-click any .json file in the Explorer for a context menu with all view options.

Configuration

{
  // Auto-open when a JSON file is activated (default: false)
  "prismJson.autoOpen": false,

  // Which view to open — "tree" | "table" | "graph" | "query"
  "prismJson.defaultView": "tree",

  // Levels to auto-expand in Tree view on load (0 = collapsed, default: 2)
  "prismJson.autoExpandDepth": 2,

  // Rows per page in Table view — 25 | 50 | 100 | 250 (default: 100)
  "prismJson.tablePaginationSize": 100,

  // MB threshold above which a mid-parse worker is hard-cancelled on new input (default: 5)
  "prismJson.workerHardCancelThresholdMb": 5
}

Use cases

• Backend developers — inspect REST API responses without leaving VS Code
• Data engineers — explore large JSON datasets (config dumps, log files, Spark outputs)
• Frontend developers — understand deeply nested API shapes and component props
• QA / DevOps — diff config files between environments, catch unintended changes
• Designers & PMs — readable table view for non-technical stakeholders reviewing data
• Anyone — stop scrolling through minified JSON at 2 a.m.

Extension anatomy

prism-json/
├── src/                         # Extension host (TypeScript + esbuild)
│   ├── extension.ts             # Activation, command registration
│   ├── providers/
│   │   ├── JsonDocumentProvider.ts   # Webview lifecycle + message bus
│   │   └── QuerySidebarProvider.ts  # Activity Bar saved-query list
│   └── commands/                # One file per view mode
│
└── webview/                     # Svelte 4 + Vite UI
    └── src/
        ├── workers/
        │   ├── jsonWorker.ts    # Off-thread: parse, flatten, query, diff
        │   └── workerBridge.ts  # Promise API + cancel semantics
        ├── state/
        │   ├── documentStore.ts # Parsed data + error stores
        │   └── queryStore.ts    # Query results, history, saved queries
        └── components/
            ├── TreeView/        # Virtual scroll tree + TreeRow
            ├── TableView/       # Sort / filter / paginate table
            ├── GraphView/       # SVG hierarchy
            ├── DiffView/        # Structural diff
            ├── ApiInspector/    # Fetch + headers + auth
            └── QueryPanel/      # Editor + list + split layout

Contributing

Bug reports and feature requests welcome — open an issue. Pull requests welcome — see CONTRIBUTING.md.

License

MIT © 2025 — see LICENSE