JSON Viewer

What Is a JSON Viewer?

A JSON viewer renders raw JSON as a collapsible, colour-coded tree so you can navigate large or deeply nested structures without scrolling through thousands of lines of text. Each node shows its key, type, value, and child count at a glance. Instead of hunting through a wall of brackets, you can open only the branches you care about and copy any value with a single click.

How to Use the JSON Viewer

• Paste JSON into the Input pane and click View, or enable Live mode to render the tree automatically as you type.
• Optionally paste a public JSON URL into the Fetch from URL bar to load a remote API response directly.
• Click any { } or [ ] bracket row to expand or collapse that node.
• Use Expand All or Collapse All to open or close the entire tree at once.
• Type in the search box to highlight matching keys and values in real time — no click required.
• Hover any row and click the copy icon to copy that node's value to your clipboard. Container nodes are serialised as pretty-printed JSON.
• Use Copy in the output bar to copy the entire pretty-printed JSON, or Download to save it as data.json.
• Click Explain with AI to get a plain-English description of what the JSON data represents.

Understanding the Tree Structure

JSON has two container types and four primitive types. The tree represents them as follows:

• Objects { } — key-value pairs. Each key is shown in bold. The {N} badge shows how many direct children the object has.
• Arrays [ ] — ordered lists. Each item is shown with its index. The [N] badge shows the item count.
• Strings — shown in green.
• Numbers — shown in blue.
• Booleans — true / false, shown in amber.
• Null — shown in grey italic.

The Keys · Nodes · Depth summary in the header shows aggregate statistics for the entire parsed structure: total object keys, total nodes, and maximum nesting depth.

How the Search Works

The search box filters by both key names and leaf values simultaneously. As you type, any row whose key or value contains your query is highlighted in amber. The match is case-insensitive. Searching does not collapse or hide non-matching nodes — it highlights matches in-place so you can see them in context. Clear the search with the ✕ button to return to the normal view.

When to Use a JSON Viewer vs a JSON Formatter

Use the JSON Viewer when you want to explore a JSON structure — navigate branches, count items, copy specific values, or understand how data is nested. Use the JSON Formatter when you want to edit or reformat the raw JSON text — change indentation, sort keys, or produce a clean copy to paste into code. Both tools share the same Monaco input pane, so you can open JSON in one and switch to the other via the sidebar without re-pasting.

Common JSON Parse Errors

• Trailing comma — { "a": 1, } is invalid. Remove the comma before the closing brace or bracket.
• Single quotes — JSON requires double quotes for keys and string values. {'key': 'value'} will not parse.
• Unquoted keys — { name: "Alice" } is JavaScript syntax, not JSON. All keys must be double-quoted strings.
• Comments — standard JSON does not allow // or /* */ comments. Use the JSON Validator with JSONC mode to strip them first.
• Missing closing bracket — every [ needs a ] and every { needs a }. The error message shows the line and column of the unexpected token.

Is My JSON Sent to a Server?

No. The entire tree is built and rendered in your browser using JavaScript. Your JSON data never leaves your machine. The AI Explain feature sends only the text you choose to explain — it does not run automatically.