Handitab

JSON Tree Viewer

View JSON as a collapsible tree: expand and collapse objects and arrays, see item counts, and spot the type of every value by color.

About JSON Tree Viewer

A JSON tree viewer shows a JSON document as nested, collapsible nodes instead of raw text. This tool parses the input with the JSON parser built into your browser, then renders each object and array as a section you can open or close, labelled with its number of keys or items. Strings, numbers, booleans, and null are colored differently. Rendering stops after 5,000 nodes so very large files do not freeze the page.

How to use JSON Tree Viewer

  1. Type or paste into the "JSON" box, or press "Use example" to try it with sample data.
  2. Set "Expand levels" if the defaults do not fit.
  3. The result appears below and updates as you type.
  4. Copy the result with the copy button, or download it as a file where that is offered.

Questions about JSON Tree Viewer

What is the difference between an object and an array in JSON?

An object is an unordered set of name and value pairs written in curly braces. An array is an ordered list of values written in square brackets. The tree labels objects with a key count and arrays with an item count.

Runs in your browser. Page last updated .

More developer tools

All 41 developer tools
Markdown Table GeneratorTurn CSV, TSV, or spreadsheet cells pasted from Excel into a Markdown table with aligned columns and a choice of text alignment.Markdown to HTMLConvert Markdown to clean, sanitized HTML code that you can copy or download, with support for tables, lists, links, and code blocks.Random File GeneratorCreate a test file of an exact size filled with random bytes, zeros, or repeating text, for checking upload limits and transfer speed.README GeneratorGenerate a README.md for a software project with a description, install and usage commands, contributing notes, and a license section.Regex ExplainerExplain a regular expression in plain English, token by token: character classes, groups, quantifiers, anchors, lookarounds, and flags.Regex TesterTest a JavaScript regular expression against sample text and see every match highlighted, with its position and capture groups listed.