A JSON viewer and tree explorer. Paste JSON, an API response or a JSON-LD block, and explore it as a collapsible tree with every value labelled by type, plus counts of keys, values and nesting depth. It runs in your browser, so the data stays on your device.
JSONを入力
JSONデータを貼り付けて構造を表示
JSONツリービューア
折りたたみ可能なノードを備えたインタラクティブなツリー構造
JSONデータを貼り付けてツリー構造を表示
What is a JSON viewer?
A JSON viewer is a tool that shows JSON data as a tree you can open and close, instead of a wall of brackets. Paste JSON, an API response or a JSON-LD block into this free JSON viewer and every object and array becomes a node, each value is labelled with its type, and a summary counts keys, values and nesting depth. Parsing happens in your browser.
What the JSON tree viewer shows
Turn a wall of brackets into a structure you can read, open and close.
Collapsible tree
Every object and array is a node. Click the chevron to expand or collapse it and focus on the part you need.
Type badges
Each value is labelled string, number, boolean, object, array or null, in its own colour.
Structure statistics
Total keys and values, how many of each type, and the maximum nesting depth.
Validation
Invalid JSON shows the parser's error message instead of a tree.
JSON-LD friendly
Paste a page's structured data to see its @type, nested entities and properties at a glance.
Parsing happens in your browser; nothing you paste is uploaded.
How to view JSON as a tree
Paste, explore, and read the statistics.
Paste your JSON
Paste an API response, a config file or a JSON-LD block into the input, or click Load sample to try it.
Check that it parses
Valid JSON turns into a tree straight away. Invalid JSON shows the parser's error message instead.
Open and close nodes
Click the chevron next to an object or array to expand or collapse it, and work down to the value you need.
Read the types and statistics
Each value carries a type badge. The statistics panel counts keys, values, each data type and the maximum depth.
Copy or clear
Copy the JSON back to your clipboard, or clear everything and paste the next file.
How to read the JSON tree
The tree mirrors the JSON exactly; nothing is reordered or changed.
Object nodes
Curly-brace objects. Their children are named keys, such as "name" or "address".
Array nodes
Square-bracket lists. Their children are numbered from [0], so you can see how many items a list holds.
Type badges
string, number, boolean, null, object or array. A badge that says string next to a price or an ID is worth a second look.
Keys and indexes
Each row starts with the key it sits under, or its position in a list, so you can trace a value back to where it lives in the data.
Max depth
How many levels deep the data goes. Deep nesting is normal for API responses and JSON-LD @graph blocks.
Counts per type
How many strings, numbers, booleans, nulls, objects and arrays the whole document contains.
Why view JSON as a tree?
API responses, exported data and config files often arrive as one long line, or as hundreds of indented lines where it is hard to tell which bracket closes which. A tree view shows the hierarchy directly: open the branch you care about and leave the rest closed.
That makes a JSON tree viewer useful for debugging an API, checking the shape of data before you write code against it, or explaining a payload to someone who doesn't read raw JSON.
Viewing JSON-LD structured data
JSON-LD is the structured data many pages carry in a script tag. Paste the contents of that tag into the viewer to see its @context, @type and nested entities, such as an Article's author or a Product's offers. It is a quick way to check that the markup says what you expect before you test it in Google's Rich Results Test.
JSON objects and arrays
A JSON object is a set of key and value pairs in curly braces. A JSON array is an ordered list of values in square brackets. Values can be strings, numbers, true or false, null, or another object or array, which is how JSON nests.
Each value's badge shows its data type: string, number, boolean, null, object or array, and each type has its own colour. Use the badges to scan a response for unexpected types, such as a number stored as a string.
Can I search for deeply nested values?
Not yet. The viewer has no search box. Collapse the top level, then open the branches that lead to the value you need; the statistics panel shows how deep the data goes.
How large a JSON file can I view?
Files up to a few megabytes work well. Larger files can make the page slow because every node is drawn in your browser. For very large data, open it in a code editor or split it first.
What is the difference between the JSON Viewer and JSON Formatter?
The JSON Formatter converts raw or minified JSON into indented, readable text output — focused on producing clean code to copy into editors. The JSON Viewer renders JSON as an interactive expandable tree — focused on exploring and navigating data structure. Use the Formatter to produce output for your code editor; use the Viewer to understand and explore unfamiliar API responses.
Can I view JSON-LD structured data in the tree?
Yes. The JSON Viewer is particularly useful for inspecting JSON-LD schema markup. You can expand @context and @graph nodes to verify your schema properties are correctly structured and nested before deploying, making it a useful companion to the Schema Markup Generator.
What is the difference between a JSON object and a JSON array?
A JSON object is an unordered collection of key-value pairs enclosed in curly braces, for example {name: Alice, age: 30}. A JSON array is an ordered list of values enclosed in square brackets, for example ['apple', 'banana']. In the tree view, objects display a key count and arrays display an item count when collapsed.
Is the JSON Viewer safe for sensitive data?
All processing happens locally in your browser. No JSON data is transmitted to any server, making it safe to view API responses, authentication tokens, or private configuration data. Processing is entirely client-side with no external network requests.
What is a JSON viewer?
A JSON viewer is a tool that displays JSON data in a hierarchical, tree-like structure with collapsible nodes, making it easier to navigate and understand complex JSON structures.
How do I expand/collapse JSON nodes?
Click on the chevron icon next to any object or array node to expand or collapse it. This allows you to focus on specific parts of your JSON data.
What do the colored badges mean?
Each badge names the data type of the value next to it: string, number, boolean, object, array or null. Every type has its own colour, so you can scan a large response and spot, for example, a number stored as a string.
How do I view JSON as a tree?
Paste your JSON into the input. If it parses, it appears as a tree on the right: objects and arrays become nodes you can open and close, and each value shows its type.
Can I view JSON-LD structured data with this viewer?
Yes. JSON-LD is JSON, so you can paste the contents of a page's application/ld+json script and see its @type, nested entities and properties as a tree.
More free JSON tools
Fix syntax, convert formats, or build structured data from scratch.
Structured data is how a page tells Google and AI engines what it is. AI Rank Lab's free audit checks it alongside the page's SEO, AEO and GEO readiness.
SEO, AEO and GEO audit
Paste a URL. The audit checks structured data, headings and on-page signals, plus robots.txt, sitemap.xml and llms.txt, and returns three scores with fixes ordered by impact.
