JSON Viewer

About this tool

Reading nested JSON as flat text is slow: you lose track of which brace closes which object, and finding one field inside a deep response means scanning by eye. A tree view makes the shape of the document visible and lets you collapse everything you do not care about.

Each node shows its key, a type badge, and a preview of its contents. Arrays display their indexes so you always know which element you are looking at, and any node can be copied as a JSONPath expression ready to paste into a query or a test.

How to use this tool

1. Paste or upload a JSON document and press Build tree.
2. Click any triangle to expand or collapse that branch, or use Expand all / Collapse all.
3. Type in the search box to filter nodes; matches in keys and in values are both highlighted.
4. Hover a node and use the copy action to put its JSONPath on your clipboard.

Key features

• ✓Collapsible tree for objects and arrays with expand-all and collapse-all
• ✓Search across keys and values with match highlighting
• ✓Array indexes rendered explicitly
• ✓Colour-coded type badges for string, number, boolean, null, object and array
• ✓Copy the JSONPath of any node
• ✓Child counts on collapsed branches so you know what is hidden

Example

{"team":"core","members":[{"name":"Ada"},{"name":"Linus"}]}

▾ root  { } 2 keys
  · team      "core"        string
  ▾ members   [ ] 2 items   array
    ▾ [0]     { } 1 key
      · name  "Ada"         string
    ▾ [1]     { } 1 key
      · name  "Linus"       string

Good to know

• Extremely wide arrays are rendered in pages of nodes to keep the browser responsive; the full data is still available in the input panel.
• The tree is read-only. Use the JSON Editor to make changes.
• Search is a plain substring match, not a JSONPath query. Use the JSON Path Finder for expression-based lookups.

Frequently asked questions