JSON Optics
JSON Optics is a fast, theme-adaptive Visual Studio Code extension for visualizing, navigating, and repairing JSON — including malformed outputs from LLMs (ChatGPT, Claude), copy-pasted object literals, or complex configuration files — without leaving your editor.
Instead of copy-pasting sensitive payload data into external web tools, JSON Optics gives you an interactive Tree View, a sortable Table View, precision Jump-to-Source navigation, and a dedicated Side-by-Side Repair Workspace.
⚡ Instant Visualization in Action
🚀 Quick Start
| Trigger Method |
Steps |
| Method A: Lightbulb (Recommended) |
Place cursor on { or [ $\rightarrow$ Click the margin lightbulb (or press Ctrl + . / Cmd + .) $\rightarrow$ Select "See through JSON Optics". |
| Method B: Shortcut |
Select code segment $\rightarrow$ Press Ctrl + Alt + J (Cmd + Alt + J on macOS). |
| Method C: Context Menu |
Right-click any selection $\rightarrow$ Select "See through JSON Optics". |
🌟 Key Features
1. 🔍 Virtualized Tree & Table Views
- Interactive Tree View: Browse deeply nested structures smoothly using virtual scrolling. Search keys/values in real-time or copy JSONPath references (
$.users[0].address.city) with a single click.
- Dynamic Table View: Automatically triggered when root-level data is an array of objects. Sort columns, filter across all fields, page through rows, and inspect nested cells.
2. 💡 Inline "Visualize" Lightbulb
- Detects JSON-like blocks without a full parser pass, so it stays fast even in large files.
- Put your cursor on a
{ or [ in a JSON, JavaScript, TypeScript, or Python file and press Ctrl + . / Cmd + . for a "See through JSON Optics" action.
3. 🛠️ Repair Workspace (LLM & Syntax Fixer)
Fix common structural errors automatically with real-time differential highlights (+ / -):
- LLM Markdown Fences: Strips enclosing
```json blocks directly from AI responses.
- Unquoted Keys: Automatically quotes identifiers including hyphens, underscores, dots,
$, and @ ({ user-id: 101 } → { "user-id": 101 }).
- Quote Normalization: Converts single quotes to double quotes while escaping internal literals.
- Python Types & Comments: Converts
True → true, False → false, None → null, and strips #, //, or /* */ comments.
- Structural Seals: Fixes trailing commas, missing commas, and auto-closes truncated/cut-off JSON streams.
4. 🎯 Precision Jump-to-Source Navigation
- Click the eye icon next to any property node in the Tree or Table view to highlight and jump directly to its exact line coordinate in your source document.
📊 What Gets Repaired
| Problem Type |
Input Example |
Repaired Output |
| Unquoted keys & Python types |
{ user-id: 101, is_active: True } |
{ "user-id": 101, "is_active": true } |
| Single quotes |
{'title': 'He said "Hello"'} |
{"title": "He said \"Hello\""} |
| Python literals & comments |
{"status": None} # inline comment |
{"status": null} |
| Trailing commas |
{"items": [1, 2, 3,],} |
{"items": [1, 2, 3]} |
| LLM Markdown fences |
```json\n{"data": 1}\n``` |
{"data": 1} |
| Variable assignments |
const config = { "port": 8080 }; |
{"port": 8080} |
| Truncated streams |
{"user": {"name": "Alex" |
{"user": {"name": "Alex"}} |
⌨️ Commands & Keybindings
| Command |
Keybinding |
Context |
JSON Optics: See through JSON Optics |
Ctrl + Alt + J (Cmd + Alt + J) |
Active text selection |
See through JSON Optics |
Ctrl + . (Cmd + .) |
Cursor on object/array boundary |
🎨 Theme Synchronization
JSON Optics seamlessly integrates with VS Code native CSS variables, adapting dynamically across Light, Dark, and High Contrast themes without fixed colors.
- Fast Startup: Bundled with
esbuild with zero runtime dependencies beyond jsonc-parser.
- Large File Protection: Diffing calculations are gracefully bypassed for files over 50,000 characters to protect UI responsiveness, while full Tree/Table rendering remains supported.
📄 License
Licensed under the MIT License.
| |
