JSONish Preview for VS Code (JSON & JSONL)

简体中文 | English

A VS Code extension for previewing JSON and JSONL files with navigation, synchronization, and performance tuned for large files.

This is a community fork of skyer/vscode-jsonl-preview (MIT). All credit for the original extension goes to its author. This fork adds plain-JSON support and large-file performance work; upstream history is preserved in this repository's git log.

What's new in this fork (0.2.1)

Expand All / Collapse All — one-click buttons in the preview toolbar to expand or collapse the whole tree (child nodes are built on demand while expanding).
Plain .json support — whole-document preview for regular JSON files (the original only handled line-delimited JSONL). The preview button, context menu, and commands now work for both file types.
Lazy DOM rendering — deeply nested structures build their child nodes only when expanded (first 2 levels render initially). Records with 100k-element arrays open instantly instead of freezing the panel.
Message-driven webview — the preview shell is built once; updates (cursor moves, edits, navigation) flow through postMessage instead of regenerating the whole HTML with the parsed JSON embedded in it.
Debounced editing refresh (150 ms) and no re-parse on cursor moves in JSON mode.

Features

Sidebar Preview: Open preview in sidebar with a single click on the icon
Dual Preview Modes: Choose between sidebar preview (for side-by-side viewing) or editor group preview
Navigation Panel: Navigate through JSONL lines with buttons and keyboard shortcuts
Position Synchronization: Click in editor to update preview, navigate in preview to scroll editor
JSON Formatting: Beautiful JSON rendering with expand/collapse functionality using built-in renderer
Empty Line Handling: Smart handling of empty lines in JSONL files
Copy JSON: Copy current JSON record to clipboard
Theme Integration: Automatically adapts to VS Code theme colors
Multi-language Support: English and Chinese interface support

Usage

Quick Start (Recommended)

Open a JSON (.json) or JSONL (.jsonl) file
Click the preview icon in the editor title bar to open preview in sidebar
For .jsonl, the preview shows the current line's JSON; for .json, the whole document

Alternative Methods

Command Palette: Use the command palette (Cmd+Shift+P / Ctrl+Shift+P) and search for:
- "Open JSONish Preview in Sidebar" - Open preview in sidebar
- "Open JSONish Preview" - Open preview in editor group
Keyboard Shortcut: Press Cmd+Shift+J (Mac) or Ctrl+Shift+J (Windows/Linux) to open preview in editor group (.jsonl files only)

First/Last: Navigate to first/last non-empty line
Previous/Next: Navigate to previous/next non-empty line
Jump Input: Enter a record number and click "Go" or press Enter
Copy JSON: Copy the current record to clipboard

Keyboard Shortcuts (in preview panel)

Left Arrow: Previous line
Right Arrow: Next line
Home: First line
End: Last line
Ctrl/Cmd + C: Copy JSON
Enter: Sync preview position to editor

Installation

From a packaged .vsix

code --install-extension jsonish-preview-0.2.0.vsix

From Source

Clone this repository
Run npm install
Run npm run compile
Press F5 to start debugging in Extension Development Host

Building for Distribution

npm install -g @vscode/vsce
vsce package

Development

Project Structure

├── src/
│   ├── extension.ts          # Extension entry point
│   ├── basePanel.ts          # Shared panel logic (parse, publish, HTML shell)
│   ├── previewPanel.ts       # Editor-group panel
│   ├── sidebarPanel.ts       # Sidebar panel
│   └── localization.ts       # i18n bundle loading
├── media/
│   ├── style.css             # Webview styles (with theme overrides)
│   ├── main.js               # Webview script (message-driven renderer)
│   └── jsonRenderer.js       # Lazy-building JSON tree renderer
├── package.json              # Extension manifest
└── tsconfig.json             # TypeScript configuration

How the preview pipeline works

The webview HTML shell is generated once per document. When it finishes loading, it sends a ready message to the host; from then on the host pushes render messages with the parsed JSON. acquireVsCodeApi() is called exactly once, inside media/main.js.

JSONish Preview (JSON & JSONL)

huchenz1