Tree will appear here
Paste JSON on the left and it will be rendered as an interactive collapsible tree.
Why explore JSON as a tree
🌳 Collapsible nodes
Click any node with children to expand or collapse it. Tree state is preserved during re-renders, so your exploration context isn't lost when the underlying JSON changes.
🎨 Type-aware rendering
Different colors for strings (green), numbers (amber), booleans (purple), null (gray italic). Object keys are bold blue so you can spot them at a glance when scanning large objects.
👁️ Preview tooltips
Collapsed nodes show a preview of their contents — the first few keys for objects, or the first few items for arrays. Quickly decide whether a node is worth expanding.
🔍 Search & highlight
Filter the tree by typing in the search box. Matching rows are highlighted in place so you can scan a large document and jump straight to the parts that matter.
🏷️ Stats badges
Each object or array shows its child count in a badge next to the key: {3} for an object with three properties, [5] for a five-element array.
📦 Large file support
The renderer is designed for documents with thousands of nodes. Collapse all to get an overview, then expand only the branches you want to inspect.
Under the hood
1. Parse with native JSON
JSONLab uses the browser's built-in JSON.parse for maximum speed. The parsed value is then handed to the tree renderer as a plain JavaScript object or array.
2. Walk recursively
The renderer walks the value depth-first, building a DOM node for each key-value pair. Type detection (jsonType) drives color and badge choices; cycle-safe guards prevent infinite loops.
3. Click handlers
Each parent row has a click handler that toggles the collapsed class on the node wrapper. CSS handles the show/hide of children — no re-rendering needed.
Tree view — common questions
How do I view JSON as a tree?
Paste your JSON into the input box on the left side of this page. JSONLab parses it immediately and renders an interactive collapsible tree in the right pane. Each object and array appears as a node you can click to expand or collapse.
If your JSON is invalid, you'll see an error panel below the workspace explaining what went wrong and on which line. Fix the error in the input and the tree will re-render automatically.
Can I expand or collapse all nodes at once?
Yes. The toolbar above the tree has Expand all and Collapse all buttons. Expand all is helpful when you want to inspect a small document end-to-end or print the entire structure.
Collapse all is most useful on large documents: it gives you a high-level overview with badges showing the size of each container ({3}, [12]). You can then expand only the branches you care about.
How does the search work?
The search box filters the tree by checking whether the text content of each row contains your query. Matching rows are highlighted in place using a soft warning-color background so you can scan them visually.
Search is case-insensitive and matches both object keys and scalar values (strings, numbers, booleans, and the literal text null). It does not descend into collapsed preview text — expand nodes first if you want to search their contents.
For more advanced searching with regex, paths, and match counts, use the dedicated JSON Search tool.
Is there a size limit?
There is no hard size limit, but very large JSON files (10MB+) can render slowly because every node is added to the DOM as a real element. On most modern laptops, documents up to about 2MB render in well under a second.
For best performance on huge documents, click Collapse all right after loading, then use the search box to find the parts you need and expand only those branches. This keeps the visible DOM small.
Can I edit the JSON in the tree?
The tree view itself is read-only — its job is exploration, not editing. To modify your JSON, edit the text in the input textarea on the left; the tree re-renders automatically on every change.
If you want a more guided editing experience with formatting options, sorting, and indentation controls, switch to the JSON Formatter. For rearranging keys recursively, try JSON Sort Keys.