JSON Viewer

How To Use

1. Paste JSON into the JSON input box, upload a .json file, or press Demo. The tree renders automatically as you type.
2. Click the ▸/▾ caret (or use ←/→ keys) to collapse and expand branches. Collapsed nodes show a summary: child count plus a preview of the first keys.
3. Type in the search box to highlight matching keys and values — matches are counted, ancestors auto-expand, and ‹/› steps through them.
4. Click a key to copy its path ($.a.b[0]); click a row to pin the breadcrumb chain, and click any breadcrumb segment to jump back.
5. Edit in place: click a value to change it (Enter commits, Esc cancels), click a boolean to toggle it, and use the row's + and × buttons to add or delete nodes. Keyboard parity: Enter toggles booleans, F2 renames a key, Delete removes a node. Undo/Redo and Reset protect every change.
6. Grab the result where you can see it: Format / Minify rewrite the input box in place (the document itself is unchanged), Copy takes exactly what the input shows, Copy escaped copies it as one quoted string literal for embedding, and Download .json saves a file. Every tree edit is mirrored into the input automatically — the text never goes stale.
7. Spot a { … } badge on a string value? That string contains JSON — click the badge to open it as a tree in a new tab, or use the row's {} action to unwrap it into real structure (and "…" to wrap a subtree back into an escaped string).
8. When strict parsing fails on a known loose-JSON pattern (JSONP wrapper, trailing commas, single quotes, unquoted keys, comments), the error panel offers Parse repaired version with the exact fix list — repair only ever happens on your click. A file with one JSON value per line (JSONL/NDJSON) gets its own Parse as array offer instead.
9. Very large input pauses auto-parsing with an explicit notice (press Parse anyway), and trees over 5,000 rows render as a preview with a Show all rows unlock.

Usage Example

Input:

{
  "server": "https://api.utiltown.com",
  "accent": "#2563eb",
  "deployedAt": 1757576285,
  "retries": [3, 5, 8]
}

In the tree, server shows a clickable link preview, accent shows a color swatch, and deployedAt shows the human-readable date. Clicking the retries key copies $.retries; clicking a value opens an inline editor, and the breadcrumb bar always shows where you are.

Frequently Asked Questions

Is my data uploaded to a server?

No. Parsing, the tree view, editing, and export all run entirely in your browser. Your JSON never leaves this page.

Can I edit the JSON in the tree and export the result?

Yes. Click a value to edit it in place, hover a row to rename (✎) or delete (×) it, and use + to add nodes. Keyboard parity: Enter toggles a boolean or opens the value editor, F2 renames a key, and Delete removes a node. Clicking a key copies its path. Every tree edit is mirrored straight back into the input box, so the text always matches the tree. Format / Minify rewrite the input (the document is unchanged), Copy grabs exactly what the input shows, Copy escaped copies it as one quoted string literal, and Download .json saves it as a file. Undo/Redo (Ctrl+Z / Ctrl+Y) and Reset are always available.

What happens with very large JSON documents?

Two explicit guards keep the page responsive. Inputs over 2,000,000 characters pause auto-parsing until you press "Parse anyway". If a tree would draw more than 5,000 rows, only the first 5,000 are rendered with a notice bar — press "Show all rows" to draw the rest. Documents over 10,000 nodes start with only the first two levels expanded.

How do I copy the path of a field?

Click any key in the tree to copy its JSONPath-style path (for example $.servers[0].host) to the clipboard. The breadcrumb bar above the tree also shows the full ancestor chain of the selected node, and every segment is clickable.

Which smart value previews are supported?

Five, with deliberately conservative rules so ordinary data is never misread: epoch seconds or milliseconds (integer in a plausible date range) show a readable date, http(s) URLs become links, #hex values show a color swatch, data:image URIs show a hover thumbnail, and strings that themselves contain JSON show a { … } badge that opens the embedded JSON as a tree in a new tab. The preview is an extra layer — the raw value is always shown in full (long strings truncate with click-to-copy) and is never rewritten.

How do I work with escaped or double-encoded JSON?

When a string value contains JSON (for example "data": "{\"a\":1}"), the tree shows a { … } badge next to it. Clicking the badge (or pressing Ctrl+Enter on the row) opens the embedded JSON as a tree in a new tab — the handoff is local, nothing is uploaded. The row actions do the in-place round trip: {} unwraps the string into a real object or array (then you can edit and export it as part of the document), and "…" wraps any subtree back into an escaped JSON string. Both are ordinary edits: undoable, reflected in Copy / Download.

My file is JSONL / NDJSON — one JSON value per line. Can it load?

JSONL (also called NDJSON) is not one JSON document — it is one complete JSON value per line, with no commas between lines and no outer [ ] wrapper: line 1 holds {"id":1,"name":"joe"}, line 2 holds {"id":2,"name":"kim"}. Logs, AI exports, and data pipelines use it because each line can be appended and streamed separately. Strict JSON.parse always rejects it, so the error panel detects it — every non-empty line must parse individually (pretty-printed multi-line JSON is never misdetected) — and offers "Parse as array (N items)". Clicking replaces the input with the lines wrapped into one array, and the whole toolbox (tree, search, editing, export) works on it from there. The wrap happens only on your click, and the original lines are preserved inside the array.

Can I send the document to the JSON Escape tool?

You usually do not need to leave: Minify rewrites the input as one compact line (the document is unchanged), and Copy escaped copies it as an escaped, quoted JSON string literal — the same result the JSON Escape tool's "Minify & Escape" produces, visible right in the input box. For string-level extras (Readable escape that keeps line breaks, Unicode ↔ CJK), the JSON Escape tool is one click away in Related Tools below.

My JSON has trailing commas, single quotes, or comments — can it still load?

Strict JSON.parse rejects those, and the page will say so with the exact line and caret. When the breakage is a known loose-JSON pattern, the error panel additionally offers "Parse repaired version": it unwraps JSONP callback wrappers, removes trailing commas, converts single-quoted strings to double quotes, quotes unquoted keys, and strips // or /* */ comments. You see the exact fix list before clicking, nothing is rewritten automatically, and the whole pass runs locally.

How is this different from the JSON Formatter?

The formatter reshapes the text (indent, minify, escape, sort keys). The viewer is for understanding and editing the structure: collapse branches, search across keys and values, jump along breadcrumbs, and edit nodes in place. Use the "View as tree" button on the formatter to hand your current JSON over.