JSON Viewer

Explore JSON as a collapsible tree with path copying and color-coded types. Runs in your browser.

About JSON Viewer

Paste JSON to visualize it as a fully interactive tree. Expand and collapse nodes, see color-coded value types (strings, numbers, booleans, nulls), view item counts for objects and arrays, and copy the JSON path for any node with one click. All processing runs locally.

Features

  • Collapsible tree view with expand/collapse all
  • Color-coded value types for quick scanning
  • Item count badges on objects and arrays
  • One-click JSON path copying ($.key[0].nested)
  • Indented tree lines for clear nesting hierarchy
  • Load sample data for quick testing
  • 100% client-side — nothing is uploaded

How to use

  1. 1Paste or type JSON into the input area.
  2. 2Click View to render the interactive tree.
  3. 3Click arrows to expand or collapse nodes.
  4. 4Hover a node and click the copy icon to copy its path.

Frequently Asked Questions

What does the path look like?
Paths use JSONPath-style notation: $.key for objects and $[0] for arrays. Nested paths look like $.users[0].name.
Can I expand all nodes at once?
Yes. Click Expand all to open every node in the tree, or Collapse all to close them.
What do the colors mean?
Green = string, blue = number, amber = boolean, red = null. Objects and arrays show item counts in gray.
Is my JSON uploaded anywhere?
No. Parsing and rendering happen entirely in your browser. Nothing leaves your device.

Related Formatters

Explore other tools