JSON Viewer

Live: spskelly.github.io/json-viewer
Repo: GitHub

What It Does

A lightweight PWA for instant JSON pretty-printing. Install it, set it as your default .json handler, and double-clicking any JSON file gives you a collapsible tree view with search, validation, and path copying.

Features

• System file handler, registers for .json files
• Collapsible tree view, hierarchical display with expand/collapse, type indicators (Object{n}, Array[n])
• JSONPath copying, click the copy button on any key to get its path (e.g. users[0].name)
• Search, find keys and values with automatic branch expansion to show matches
• Validation, immediate feedback on JSON validity
• Statistics, key count, max depth, arrays/objects count
• Tree/Raw toggle, switch between structured and raw views
• Syntax highlighting, color-coded types (string, number, boolean, null)
• Keyboard navigation, arrow keys, Enter/Space to navigate and expand nodes
• Dark/light mode, persisted across sessions
• Offline, cache-first service worker

Why It Exists

Browser DevTools can pretty-print JSON, but they can’t register as a file handler. This bridges that gap: a native-feeling app for a common developer task.

Technical Details

5 files, ~1,000 lines total. No build step, no dependencies. The tree renderer builds DOM nodes lazily, large JSON files don’t freeze the UI because collapsed branches aren’t rendered until expanded.