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,100 lines total. No build step, no dependencies. The tree renderer builds the full DOM up front, and expand/collapse is just a CSS class toggle, which keeps the code simple and makes expand-all/collapse-all instant.