Skip to content
devsmiths

JSON Tree Viewer

Explore large JSON as a tree with search, paths, and previews.

Input

What this tool does

The JSON Tree Viewer turns a JSON document into an explorable tree — expand and collapse nested objects and arrays, search by key or value, copy a node’s JSONPath with one click, and preview rich values (clickable URLs, image thumbnails, humanized dates, color swatches). Everything runs in your browser — nothing is uploaded.

How to use it

Paste JSON (or load the example), and the right pane fills with a tree. Click a chevron to expand; use the toolbar to expand or collapse everything. Hover a row to reveal Copy value, Copy JSONPath, and (for objects/arrays) Copy subtree buttons.

Input: {"repo":"devsmiths/web","stars":1280,"homepage":"https://dev-smiths.org","createdAt":"2024-03-11T08:24:00Z","themeColor":"#3B82F6","avatar":"https://avatars.githubusercontent.com/u/9919?s=80","topics":["json","developer-tools","cloudflare"],"owner":{"login":"ada","admin":true}}

What you can do:

  • The homepage field becomes a clickable link (opens in a new tab) because it looks like a URL.
  • The createdAt field is humanized (e.g. 3/11/2024, 8:24:00 AM) while keeping the raw ISO string in parens.
  • The themeColor field shows a small swatch next to #3B82F6.
  • Expand owner and click the copy-path icon next to login to copy $.owner.login to your clipboard.
  • Search topic in the toolbar to highlight just the topics branch.

Toggle between Tree and Raw at the top of the output pane to compare the explorable tree with the underlying source.

Limits and edge cases

  • The viewer renders well-formed JSON only. If your input is broken, run the Validator first, or jump straight to Repair to convert JSON5 / JSONC / Python-ish data into standard JSON.
  • Trees with very long single arrays (> 5,000 items) currently render every row; a true windowed list lands in a follow-up. Collapse big arrays to keep things snappy.
  • URLs open in a new tab with rel="noreferrer noopener" — the page never fetches them itself. No analytics or telemetry is sent.
  • Editing inside the tree is a roadmap item (Form view); for now the tree is read-only.
  • For the underlying query language, see JSONPath explained; for very large documents, see working with large JSON files.

Frequently asked questions

How do I copy a value's JSONPath?
Hover the row (or focus it via keyboard) and click the link icon next to the value. The path is written in canonical JSONPath form, e.g. $.owner.login or $.users[0].name. Keys that aren't simple identifiers are escaped with bracket notation: $["key with spaces"].
Why is a long string truncated with an ‘expand’ button?
Strings longer than 120 characters are clipped so a single value can't blow out the row height. Click ‘expand’ to see the full string; the toolbar ‘Copy value’ button always copies the full text.
Does the viewer execute URLs or fetch images?
No. URLs become clickable links that open in a new tab with rel=noreferrer noopener — the page never fetches them itself. Image-shaped URLs aren't pre-loaded either; only the link is rendered.
Can I search nested keys?
Yes — the search box matches any key or leaf value (case-insensitive, substring). Matching rows are highlighted in place; the parent path stays collapsed unless you expand it.
What's the difference between Tree view and Raw view?
Tree view is the explorable, type-aware tree. Raw view is a read-only editor pane showing your input as-is (handy when you want to see the source line that produced a node). Both views share the same input.
Is my JSON sent to a server?
No. Parsing, tree-building, search, and copy all happen in your browser; the page never uploads your data.