JSON Viewer

What is JSON Viewer?

JSON Viewer renders parsed JSON as a collapsible, syntax-highlighted tree instead of a flat wall of text — each object and array can be expanded or collapsed, and every value's path is one click away from your clipboard. It's built for exploring a large or unfamiliar payload rather than just formatting one.

How it works

Your input is parsed with JSON.parse() on every keystroke; a successful parse is handed to the JsonTree component, which walks the resulting object graph and renders each key/value pair as an expandable node. A failed parse is run through a helper that converts JSON.parse's error position into a line number, which is shown both in the error bar and as a highlighted line in the input editor. Clicking a key builds its dot/bracket path (e.g. $.tools[0].slug) and copies it via the Clipboard API — that's the same path syntax the JSONPath Tester consumes. The search box filters by matching your term against every key and value in the tree and highlighting hits, without collapsing or altering the rest of the structure.

Features

• Collapsible tree view with click-to-copy dot-notation paths
• Live search that highlights matching keys and values
• Line-accurate syntax error reporting on invalid JSON
• Resizable split panel between raw input and tree, saved across visits
• Load a .json file directly or start from built-in sample data

Example

Input:

{
  "name": "DevFormats",
  "version": "2.0",
  "tools": [
    { "slug": "json-formatter", "category": "json" },
    { "slug": "yaml-formatter", "category": "yaml" }
  ],
  "meta": { "free": true, "clientSide": true }
}

Clicking the first tool's slug node in the tree copies its path:

$.tools[0].slug

Common errors

Any invalid JSON — a trailing comma, single-quoted strings, an unquoted key, or an unclosed bracket — stops the tree from rendering and shows a SyntaxError with the line and column where JSON.parse gave up, mirrored as a highlighted line in the editor gutter. Since the tree only ever reflects successfully parsed input, there's no partial or best-effort tree for broken JSON — fix the reported line first.

Best practices

Use the copied path directly as a starting point in the JSONPath Tester when you need to extract the same value programmatically across many similar documents. For very large payloads, search first to jump straight to the field you care about rather than expanding branches by hand.

Spec

RFC 8259 — The JSON Data Interchange Format