A VSCode extension for previewing JSONL files with navigation and synchronization features.

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 line to clipboard
Theme Integration: Automatically adapts to VSCode theme colors
Multi-language Support: English and Chinese interface support

Usage

Quick Start (Recommended)

Open a JSONL file (.jsonl extension)
Click the $(split-horizontal) icon in the editor title bar to open preview in sidebar
The preview panel will open in the sidebar showing the current line's JSON content

Alternative Methods

Command Palette: Use the command palette (Cmd+Shift+P / Ctrl+Shift+P) and search for:
- "Open JSONL Preview in Sidebar" - Open preview in sidebar
- "Open JSONL 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

First/Last: Navigate to first/last non-empty line
Previous/Next: Navigate to previous/next non-empty line
Jump Input: Enter a line number and click "Go" or press Enter
Copy JSON: Copy the current JSON line 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 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
│   └── previewPanel.ts       # Webview panel implementation
├── media/
│   ├── style.css            # Webview styles (with theme overrides)
│   ├── main.js              # Webview JavaScript
│   └── json-beautiful-render.js # Official json-beautiful-render library
├── package.json             # Extension manifest
└── tsconfig.json           # TypeScript configuration

Adding JSONL Language Support

To enable JSONL file detection, you need to configure VSCode to recognize .jsonl files as JSONL:

Open VSCode settings (JSON)
Add:

"files.associations": {
    "*.jsonl": "jsonl"
}

Multi-language Support

JSONL Preview supports both English and Chinese interfaces. The extension automatically detects your VS Code display language and shows the appropriate interface.

Supported Languages

English (default)
Simplified Chinese (简体中文)

License

MIT

JSONL Preview