JSON Preview

A macOS Quick Look extension that provides interactive JSON file previews. Select a .json file in Finder and press Space to get a syntax-highlighted, collapsible tree view instead of plain text.

Features

• Syntax highlighting — keys, strings, numbers, booleans, and null each get distinct colors
• Collapsible tree — click any object or array to collapse/expand, with item count badges
• Search — real-time filtering with match counter and keyboard navigation (Enter/Shift+Enter)
• Expand All / Collapse All — one-click tree manipulation
• Copy Prettified — copies formatted JSON to clipboard
• Dark mode — automatically follows system appearance
• Performance — auto-collapses deep nodes for files with 5000+ nodes
• 10 MB limit — gracefully rejects oversized files

Install

Prerequisites

• macOS 14.0+
• Xcode 15+
• XcodeGen (brew install xcodegen)
• An Apple Developer account (free works) signed in to Xcode

Build & Install

# Clone
git clone https://github.com/mjumelet/json-preview.git
cd json-preview

# Install XcodeGen if needed, generate Xcode project
make setup

# Build, install to /Applications, register extension
make install

If the extension doesn't activate, set your Apple Developer Team ID:

make install DEVELOPMENT_TEAM=YOUR_TEAM_ID

Find your Team ID in Xcode under Signing & Capabilities, or at developer.apple.com/account → Membership Details.

Verify

# Check extension is registered
pluginkit -mDvvv -p com.apple.quicklook.preview | grep -i json

# Test from terminal
qlmanage -p test.json

Or simply select any .json file in Finder and press Space.

Troubleshooting

If the preview doesn't appear:

1. Open System Settings → Extensions → Quick Look and enable "JSON Preview Extension"
2. Reset the Quick Look cache: qlmanage -r cache && qlmanage -r
3. Make sure no other JSON preview extension is taking priority

Project Structure

json-preview/
├── project.yml                  # XcodeGen project spec
├── Makefile                     # Build/install commands
├── JSONPreview/                 # Container app (SwiftUI)
│   ├── JSONPreviewApp.swift
│   └── ContentView.swift
├── PreviewExtension/            # Quick Look extension
│   ├── PreviewProvider.swift    # QLPreviewProvider — reads JSON, returns HTML
│   └── Info.plist
├── Resources/
│   └── preview.html             # Interactive viewer (HTML/CSS/JS)
└── test.json                    # Sample JSON for testing

How It Works

The extension uses the data-based QLPreviewProvider approach:

1. Reads the JSON file and validates it
2. Base64-encodes the data and injects it into a self-contained HTML template
3. Returns the HTML via QLPreviewReply with UTType.html
4. Quick Look renders the HTML with full JavaScript interactivity

The HTML template is a single file with embedded CSS and JavaScript — no external dependencies.

License

MIT