Visualizador em árvore de JSON: explore JSON como uma árvore colapsável

Uma resposta de API de 5.000 linhas é ilegível como texto cru. Uma árvore JSON colapsável transforma aquela parede de colchetes em uma estrutura interativa que você pode expandir e colapsar um galho de cada vez —— pra você achar o campo que importa sem rolar passando por todo o resto. Este guia explica o que é um JSON tree viewer, por que vence texto cru pra dados grandes ou profundamente aninhados, e quando pegar uma árvore em vez de um formatter ou validator.

O que é uma árvore JSON colapsável?

Um JSON tree viewer parseia seu JSON e renderiza como hierarquia de nós expandíveis em vez de um bloco plano de texto. Todo objeto {} e array [] vira um nó que você pode colapsar pra uma linha só ou expandir pra revelar seus filhos. É a diferença entre ler JSON e navegar ele.

// Colapsado —— você vê o formato de relance
{
  "user": {…},        ▶ 6 keys
  "orders": […],      ▶ 24 items
  "meta": {…}         ▶ 3 keys
}

Você clica num nó e ele expande; clica de novo e ele colapsa de volta pra um resumo de uma linha, geralmente com uma contagem das keys ou items escondidos. O dado nunca muda —— só quanto dele você está olhando.

Por que uma árvore vence uma parede de texto

Formatar (pretty-print) torna o JSON legível, mas um documento grande já formatado ainda é milhares de linhas pra rolar. Uma árvore adiciona estrutura que você controla:

• Dados profundamente aninhados —— arquivos de config, manifests do Kubernetes e respostas GraphQL aninham por muitos níveis. Colapse os galhos que não te interessam e a seção relevante sobe ao topo.
• Respostas de API grandes —— colapse um array de 500 itens pra uma linha, expanda só o elemento que você está debugando.
• Payloads desconhecidos —— colapsar tudo pro nível de topo te dá um mapa instantâneo do formato de uma API antes de escrever uma única linha de código de parse.
• Comparar estrutura —— nós colapsados deixam fácil ver quais seções dois payloads têm em comum.

Expandir, colapsar e navegar

Um bom JSON tree viewer te dá mais do que clicar-pra-alternar:

• Expandir/colapsar por nó —— abra só o galho que está investigando.
• Colapsar tudo / expandir tudo —— resete a visão na hora em vez de fechar nós um a um.
• Contagens de items e keys —— um nó colapsado mostra ▶ 24 items ou ▶ 6 keys pra você não se perder.
• Realce de sintaxe —— keys, strings, números, booleanos e null pegam cada um uma cor distinta, então os tipos ficam óbvios de relance.
• Navegação por key —— pule pra um campo sem rolar por milhares de linhas.

Buscar por caminho: JSONPath e JMESPath

Uma vez aberta a árvore, a próxima pergunta normalmente é «onde fica essa key?». Duas pequenas linguagens de query deixam você endereçar valores por caminho em vez de clicar:

• JSONPath —— inspirado em XPath, padronizado como RFC 9535. $.user.orders[*].id se lê como «cada id em user.orders». Suporta wildcards, slices, filtros (?(@.price > 10)) e descida recursiva (..price).
• JMESPath —— usado pelo --query do AWS CLI e muitas ferramentas cloud. Superfície parecida mas com projeções e funções de primeira classe: users[?active].name.

Um tree viewer é pra exploração; JSONPath/JMESPath são pra extração repetível. Combine: use a árvore pra achar o caminho, depois capture como expressão JSONPath pra scripts ou no jq.

Tree viewer vs Formatter vs Validator —— quando usar cada um

Esses se sobrepõem —— a maioria das ferramentas modernas formata e renderiza árvore —— mas a pergunta que decide qual você pega é se você precisa de saída pra copiar (formatter) ou estrutura pra explorar (viewer). Pra a comparação completa, veja JSON Viewer vs JSON Formatter.

Lide com JSON quebrado antes de visualizar

Um tree viewer precisa de JSON válido pra montar a árvore —— ele não pode renderizar uma estrutura que não consegue parsear. Se sua entrada tem vírgulas no final, aspas simples ou keys sem aspas (comum em config editado à mão ou saída de LLM), conserte primeiro. Um bom viewer conserta erros comuns automaticamente antes de renderizar; senão, limpe com JSON Fix ou cheque o erro exato com o validator. Pras regras de base, veja O que é JSON?

Perguntas frequentes

O que é uma árvore JSON colapsável?

Uma visualização que renderiza JSON como hierarquia de nós expandíveis em vez de texto plano. Cada objeto e array pode ser colapsado pra um resumo de uma linha ou expandido pra mostrar os filhos, então você pode navegar em documentos grandes sem rolar por tudo.

Como um JSON tree viewer é diferente de um formatter?

Um formatter gera texto limpo e indentado pra você copiar; um tree viewer renderiza uma estrutura interativa por onde você clica. Use formatter pra saída, viewer pra explorar. Veja a comparação completa.

Posso colapsar e expandir nós individuais?

Pode —— clique em qualquer objeto ou array pra alternar, e use «collapse all» / «expand all» pra resetar a visão inteira. Nós colapsados mostram uma contagem das keys ou items escondidos.

E se meu JSON for inválido?

Uma árvore só pode ser montada a partir de JSON parseável. Conserte erros comuns primeiro com JSON Fix, ou ache o problema exato com o JSON validator, depois veja o resultado limpo.

Explore seu JSON como uma árvore

Cole qualquer JSON no JSON Viewer do fixjson e ele renderiza uma árvore colapsável na hora —— expanda e colapse qualquer nó, veja contagens de itens, e navegue por payloads grandes aninhados. Ele conserta JSON quebrado antes de renderizar, e tudo roda no seu navegador, então nada é enviado.

• JSON Viewer —— explore JSON como árvore colapsável
• JSON Viewer vs JSON Formatter —— qual ferramenta combina com sua tarefa
• Como formatar JSON —— pretty-print de saída legível em texto
• JSON Diff —— compare dois documentos JSON lado a lado
• O que é JSON? —— os tipos de dados e regras por trás da árvore