JSON Tree Viewer
Explore JSON como uma árvore recolhível e pesquisável em vez de um bloco de texto plano.
Entrada JSON
Árvore
Digite JSON à esquerda para explorá-lo como uma árvore.
O que é JSON Tree Viewer?
Um visualizador de árvore JSON renderiza um documento JSON como uma árvore recolhível e interativa em vez de uma parede plana de texto indentado — a mesma experiência de navegação que você obtém no painel Network do DevTools do navegador ou no visualizador de resposta de um cliente de API. Cada objeto e array se torna um nó que você pode expandir ou recolher independentemente, chaves e valores são coloridos por tipo (strings, números, booleanos, null) e você pode pesquisar em todo o documento para saltar direto à chave ou valor que procura, em vez de rolar por centenas de linhas. Isso é especialmente útil para respostas de API grandes e profundamente aninhadas ou arquivos de configuração, onde uma visão formatada simples dificulta enxergar a forma geral dos dados ou encontrar um campo específico enterrado vários níveis abaixo.
Como usar JSON Tree Viewer
- Cole ou digite seu JSON no painel esquerdo.
- A árvore à direita é renderizada instantaneamente — clique na seta ao lado de qualquer objeto ou array para expandi-lo ou recolhê-lo.
- Use "Expand all" ou "Collapse all" para controlar a árvore inteira de uma vez, ou a caixa de pesquisa para destacar chaves/valores correspondentes a um termo (ramos correspondentes se expandem automaticamente).
- Passe o mouse sobre qualquer linha e clique no ícone de copiar para pegar seu caminho (por exemplo roles[0].name) para usar em código ou uma consulta JSONPath.
Exemplos
Explorando uma resposta de API aninhada
Entrada
{"user": {"id": 1, "roles": [{"name": "Admin"}, {"name": "Editor"}]}}
Saída
Collapsible tree: user → roles [2] → {name: "Admin"}, {name: "Editor"}
Copiando o caminho de um campo
Entrada
{"data": {"items": [{"sku": "P001"}]}}
Saída
Clicking copy on the sku field yields: data.items[0].sku
Erros comuns
- Tentar editar valores diretamente na árvore — esta ferramenta é somente leitura para exploração; use a ferramenta JSON Editor se precisar modificar valores.
- Esperar que o caminho copiado seja uma expressão JSONPath completa (com $ no início) — é um caminho ponto/colchete simplificado para consulta rápida, não uma string de consulta JSONPath.
- Assumir que ramos recolhidos são removidos dos dados — recolher apenas os oculta visualmente; nada é excluído ou alterado.
Por que usar esta ferramenta
- Roda inteiramente no seu navegador — nada do que você colar é enviado a lugar algum.
- Torna JSON profundamente aninhado muito mais fácil de navegar do que uma visão formatada plana, especialmente para respostas de API grandes.
- A cópia de caminho em um clique poupa você de contar manualmente índices de array ou chaves aninhadas ao escrever código sobre os dados.