Skip to main content

JSON tree viewer

Explore JSON interactively with a collapsible tree, type-coded values, and per-node JSONPath copy.

Free & unlimited
Input JSON
7 keysDepth 259 bytes
Tree
{
"name":"example"
"items":[3 items]
"nested":{1 keys}
}
All processing happens in your browser. No data is sent to any server.

A pretty-printer turns one long line into two thousand, which is progress but not an answer. This viewer parses what you paste with the browser JSON parser and renders it as a collapsible tree instead: objects and arrays show their key or item count before you open them, strings are green, numbers amber, booleans indigo and null grey-italic, and every node carries a copy button that yields its JSONPath, such as $.data.items[3].id. A search box filters the tree by key or value, a type dropdown narrows it to one JavaScript type, and the header keeps a running key count, maximum depth and byte size for whatever is currently in the box.

Key facts about JSON tree viewer

Key facts about JSON tree viewer
ParserThe browser built-in JSON.parse. Parse errors are shown verbatim, including the character position the engine reports
InputPaste or type into the textarea, or use the Paste button to pull from the clipboard. There is no file picker — this tool is for text you already have
Path formatJSONPath in dot-bracket form: the root is $, object keys append .key, array items append [index]
CountersTotal keys counted recursively (array items included), maximum nesting depth, and the byte size of the raw text measured with Blob
Type colouringstring, number, boolean, null, object and array each get their own colour so a numeric string stands out from a number
Render depthLevels beyond 10 are collapsed behind a marker rather than rendered — deep documents stay readable and fast
Long stringsValues over 150 characters are clamped to one line and expand in place when clicked
SearchMatches keys, string values and numbers, case-insensitive; a parent stays visible when any descendant matches
Type filterShow only nodes of one type; containers are kept when they hold a match, so filtering to number reveals where the numbers live
Expand stateExpand all walks the whole document and opens every path; collapse all returns to the root node

What happens to your file

Everything happens in this tab. The text you paste is parsed by the browser own JSON.parse call and rendered into the DOM; it is never sent to a server, never written to storage, and never logged. The Paste button uses the clipboard permission your browser asks for, and the copy-path button writes a short string back to your clipboard — both are local operations. Because the document lives only in the page, reloading the tab clears it, which is the right behaviour for an API response that happens to contain a token or a customer record.

About this tool

  1. 1

    Paste the JSON

    Drop an API response or a config file into the textarea. The tree redraws as you type, so a missing bracket surfaces immediately as a parse error with the position the engine reports.

  2. 2

    Read the header counters

    Key count, depth and byte size appear under the box. Depth is the number that predicts pain: a document 14 levels deep is why your mapping code keeps failing.

  3. 3

    Open the branch you care about

    Click a key to expand it. Collapsed objects and arrays show how many keys or items they contain, so you can skip a 400-item array without opening it.

  4. 4

    Search or filter

    Type in the search box to keep only branches whose key or value matches, or pick a type to see only strings, numbers, booleans, nulls, objects or arrays.

  5. 5

    Copy the path

    Hover a node and press its copy button to put the JSONPath on your clipboard, ready for a jq expression, a JSONPath query or an index into your own code.

Specs & compatibility
Input methodTextarea, clipboard paste, or the Paste button
Accepted contentAny valid JSON document: object, array, string, number, boolean or null at the root
Maximum render depth10 levels; deeper nodes are summarised
Inline string clamp150 characters
Path syntax$.key.sub[0].leaf
Filter typesstring, number, boolean, null, object, array
Browser supportAny modern browser; clipboard read needs permission, everything else does not
Cost / accountFree, unlimited, no signup
  • Expand all then search is the fastest way to find every occurrence of a key name in a large document.
  • The key counter counts array items too, so a document with 12 keys and 8,000 counted keys is mostly one big array.
  • Filtering to null is a quick audit for fields an API is failing to populate.
  • A value shown in green with digits inside is a string, not a number — that colour difference catches the classic id-as-string bug before your parser does.
  • Click a long string to unclamp it in place instead of scrolling the raw text in the textarea.
  • If the tree stops at a line saying deeper levels are hidden, the document is more than 10 levels deep — copy the path at that point and inspect that subtree on its own.
  • The copied path is dot-bracket JSONPath, which pastes straight into most JSONPath testers and into JavaScript with only the leading $ removed.
  • Collapsible tree with key and item counts
  • Per-type colour coding
  • JSONPath copy on every node
  • Key, value and type search
  • Type filter
  • Key count, depth and byte size
  • Expand all and collapse all
  • Clipboard paste
  • Reading an API response that arrived as one unbroken line in a terminal.
  • Finding the exact path to a nested field so you can write the accessor once and correctly.
  • Checking which fields in a payload came back null before filing a bug against the API.
  • Measuring how deep a configuration file has grown before refactoring it.
  • Spotting numbers that are actually strings in a response you are about to parse.
  • Explaining a payload structure to someone else by expanding just the branch that matters.
No. The text is parsed by the browser own JSON.parse and rendered into the page; there is no request carrying it anywhere, no storage write and no logging. That matters because the JSON people paste into a viewer is usually a live API response, often with a bearer token, an email address or a customer record in it. Reloading the tab clears the document, and closing the tab disposes of it entirely.
This viewer takes text: paste into the textarea, use the Paste button to pull from the clipboard, or drop the contents in by any means your editor offers. There is no file picker, which keeps the tool instant and stateless. For a file on disk, open it in an editor and copy the contents, or use a formatter tool that accepts files and then bring the result here for the tree view and path copying.
It puts the node JSONPath on your clipboard in dot-bracket form: the root is $, object keys are appended with a dot, and array elements with a bracketed index, so a nested field reads like $.data.items[3].id. That string pastes directly into most JSONPath testers and jq-style tools, and dropping the leading $ gives you a valid JavaScript accessor for the same value.
Rendering is capped at 10 nested levels. Past that a marker replaces the subtree, because drawing an arbitrarily deep document makes the page slow and unreadable without helping anyone. The data is still fully parsed and the counters still report the true maximum depth. To inspect a deeper branch, copy the path at the cut-off point and paste that subtree into the box on its own.
Search matches text: it compares your term, case-insensitively, against key names, string values and the digits of numbers, and keeps a parent visible whenever a descendant matches so you can see where the hit lives. The type filter ignores text and keeps only nodes of one JavaScript type, again preserving the containers that lead to them. Used together they answer questions like which string fields mention error.
Yes. When JSON.parse throws, the message from the browser engine is shown verbatim, which in Chrome and Edge includes the character position and the token that broke the parse. That is usually enough to find a trailing comma, an unquoted key or a stray newline inside a string. The tree simply stays empty until the document parses, so you always know whether you are looking at valid JSON.

Related tools

View all

Part of File viewers that open the file in your browser

More in Data & Dev2

Updated

We use anonymous analytics to improve ToolChamp. No personal data is stored or sold. Privacy Policy