Features

Five View Modes

Best JSON Viewer renders JSON in five interchangeable views, all built on virtual scrolling for instant performance even on multi-megabyte files.

Tree View

Collapsible, expandable JSON tree with color-coded value types:

Collapsed nodes show a child count badge. Navigate large structures without expanding everything.

Raw View

Syntax-highlighted raw JSON using the Shiki github-dark theme. Three rendering strategies based on file size:

Line numbers are always visible.

Table View

Renders JSON as an interactive, virtual-scrolled table. Supports three data shapes:

• Array of objects — dynamic columns from union of all keys, row-index gutter.
• Array of primitives — single "Value" column.
• Plain object — two-column key/value table.

Nested objects and arrays expand inline within cells.

Visualize (Graph) View

Interactive node-graph visualization powered by jsoncrack-react. Explore relationships and structure at a glance.

Edit View

Full-screen JSON editor with:

• Live validation on every keystroke with inline error messages (line and column).
• Tab key inserts 2 spaces instead of shifting focus.
• Update button active only when JSON is valid and different from current data.
• Revert to original restores the source JSON after any mutation.

---

JSONata Query Language

Best JSON Viewer embeds full JSONata support in the toolbar:

• Expression input — Type any JSONata expression; evaluation is debounced at 300ms.
• Preset dropdown — Context-aware templates that auto-populate from your data's keys:
  • Map field ($.fieldName)
  • Filter ($[fieldName = "value"])
  • Pick fields ($.{ "id": id, "name": name })
  • Search ($[fieldName ~> /pattern/i])
  • Array slice ($[0:10])
  • Count ($count($))
  • Sort ($sort($, function($a, $b) { ... }))
• Result propagation — JSONata results flow into all view modes (tree, table, raw, graph).

Pagination

Large array results from JSONata queries are automatically paginated at 50 items per page. Smart extraction unwraps single-key wrapper objects (e.g. { users: [...] }) automatically.

---

Theme System

Three themes: Dark, Light, and System (follows OS preference). Cycle between them with the toolbar button. Your choice is persisted to localStorage.

Colors use the OKLCH color system for perceptual consistency across themes.

---

Export & Copy

• Copy to clipboard — Copies the currently visible data (original JSON, or JSONata result if active). Toast notification on success.
• Export as .json file — Opens a dialog with a smart default filename derived from the URL pathname or page title. Downloads as a .json blob.

---

Element Picker

When the viewer is activated on a non-JSON page, it enters element picker mode:

• Crosshair cursor replaces the default.
• Blue highlight overlay tracks the hovered element.
• Tooltip shows the tag name and text snippet.
• Click to extract — Extracts JSON from textContent, value (inputs), HTML attributes, and walks up the DOM tree. Shadow DOM is pierced via elementsFromPoint.
• Escape cancels the picker.

Extracted JSON opens in the secondary viewer — a floating iframe modal with the full viewer (minus Visualize mode).

---

Privacy & Permissions

Best JSON Viewer follows least-privilege principles:

No telemetry. No tracking. No data leaves your browser.