JSON and XML Tree Viewer

What is a JSON tree viewer?

A JSON tree viewer turns raw JSON text into a hierarchy of nodes you can expand and collapse. Instead of scrolling through thousands of characters on a single line, you open one branch at a time and see how objects, arrays, and values fit together. That makes it far easier to understand an unfamiliar API response, find a nested field, or confirm that a payload has the shape your code expects.

This tool also reads XML. The XML is converted to a JSON tree, so the same search and JSONPath features work for both formats. When you need to change the data rather than read it, use the JSON Formatter, and when you need to see what changed between two versions, use the Diff Checker.

Everything runs locally. Your document is parsed in your browser tab, so API keys, customer records, and internal configuration stay on your device.

What it does

• Collapsible tree

  Navigate deep JSON and XML structures with expand and collapse controls at every level.

• Search keys and values

  Type any key name or value and the tree filters to matching branches instantly.

• JSONPath queries

  Run expressions like $.orders[*].id or $..email and get the matching nodes as JSON.

• JSON and XML input

  Paste JSON or XML. XML is converted to a JSON tree automatically, with attributes kept as @name keys.

• Runs entirely in your browser

  Your data never leaves your device. No upload, no server, no logging.

• Fast on large payloads

  Hand rolled rendering keeps the tree responsive on documents with thousands of nodes.

• Copy results in one click

  Copy a JSONPath result to your clipboard and paste it straight into code, a ticket, or a test.

• Free, no account

  No sign-up, no watermark, no daily limit. Open the page and start pasting.

How to use the JSON and XML Tree Viewer

1. Step 1

   Paste JSON or XML

   Drop in a document, or load one of the samples to see how it works.

2. Step 2

   Explore and search

   Expand nodes, search keys or values, and inspect the shape of the data.

3. Step 3

   Run a JSONPath query

   Query with JSONPath to extract exactly the nodes you need, then copy the result.

Example: query a JSON document with JSONPath

Take this small order export. Paste it into the viewer, expand orders, and try the queries below. Each one selects a different part of the same document.

{
  "orders": [
    { "id": 101, "customer": { "email": "ana@example.com" }, "total": 49.5 },
    { "id": 102, "customer": { "email": "raj@example.com" }, "total": 12 }
  ]
}

JSONPath cheat sheet

These are the JSONPath features this tool evaluates. Use bracket notation for keys that contain spaces, dashes, or other special characters.

How XML is converted to a JSON tree

XML has attributes, text, and repeated elements that JSON does not have a direct equivalent for. The viewer uses a simple, predictable mapping so no data is lost. Exact output can differ slightly for edge cases such as comments and CDATA sections.

<order id="101">
  <item sku="A1">Pen</item>
  <item sku="B2">Ink</item>
</order>

{
  "order": {
    "@id": "101",
    "item": [
      { "@sku": "A1", "#text": "Pen" },
      { "@sku": "B2", "#text": "Ink" }
    ]
  }
}

Because the result is a normal JSON tree, JSONPath works on it too. In the sample above, $..item selects every item element, and typing @sku in the search box finds every sku attribute.

Common uses

• Debug API responses

  Paste a response from curl, Postman, or the browser network tab and see the real shape of the data instead of one long line. Collapse what you do not need and search for the field you are chasing.

• Inspect config files

  Open package.json, tsconfig, Terraform JSON, or app settings as a tree to check nesting and spot keys that sit at the wrong level.

• Read webhook payloads

  Webhooks from payment, chat, and CI services are often deeply nested. Search for an id or an email and jump straight to the branch that holds it.

• Explore XML feeds

  RSS, sitemaps, SOAP responses, and older XML APIs become a navigable tree, with attributes and repeated elements made explicit.

• Learn and test JSONPath

  Try expressions against real data and see matches immediately. It is the quickest way to get the syntax right before you use it in a script, a test, or an API gateway rule.

• Check data before a migration

  List every occurrence of a key with $..key to confirm that each record has the fields you expect before you move or transform the data.

How it compares

Many online JSON viewers send your data to a server, require an account, or limit how much you can use them. Here is how ToolDeck compares with typical cloud alternatives.

Which ToolDeck tool should you use?

Fixing common JSON errors

The viewer needs valid JSON or XML to build a tree. If you see an error, one of these is usually the cause. Exact wording of the message varies by browser.

The JSON Formatter can validate and pretty print your text so the exact position of the problem is easier to spot.

Privacy and performance

The page makes no network request when you paste, search, or run a query. Parsing, tree building, and JSONPath evaluation happen in your browser, which is why the tool keeps working offline after the first load and why nothing you paste is stored or logged.

For very large documents, keep the tree collapsed and use the search box to narrow down to the branch you need before expanding it. This keeps the page responsive because child rows are rendered only when you open a node.

Related developer tools

• JSON Formatter

  Pretty print, validate, and minify JSON.

• JSON AI Fixer

  Repair broken JSON from LLMs and remove markdown.

• JSON to Code

  Convert JSON into TypeScript, Go, or Rust models.

• JSON Mock Data Generator

  Generate realistic mock JSON from a schema.

• Diff Checker

  Compare two blocks of text or code.

• Hash Generator

  Generate MD5, SHA-1, and SHA-256 hashes.

• Regex Tester

  Test and debug regular expressions instantly.

• Fake User Generator

  Generate fake usernames and secure passwords for testing.

More free ToolDeck tools

• Image Upscaler

  Enlarge photos 2x to 16x with AI, right in your browser.

• Video Upscaler

  Upscale video resolution, for example 720p to 4K.

• Anime Video Upscaler

  Upscale anime to 1080p or 4K using the Anime4K engine.

• Uppercase to Lowercase

  Instantly convert capital letters to lowercase.

• PDF Editor

  Edit PDF files privately in your browser.

• Image to Text (OCR)

  Extract editable text from any image or screenshot.

Questions people ask