Visualizador de JSON em Árvore Online

Visualizador de JSON em árvore

Cole um JSON ou abra um arquivo .json para navegar por ele como uma árvore: cada objeto e cada array vira um nó que você expande ou recolhe. O arquivo é lido no seu navegador — nada é enviado a servidor.

Como usar

1. Cole o JSON na caixa e clique em Ver em árvore, ou use Abrir arquivo .json (também dá para arrastar o arquivo). O botão Exemplo carrega um JSON de demonstração.
2. Clique na seta de um objeto ou array para abrir e fechar. Recolher tudo, Nível 2, Nível 3, Nível 4 e Expandir tudo mudam a árvore inteira de uma vez.
3. Digite na busca para destacar chaves e valores; Enter pula para o próximo resultado e Shift+Enter volta ao anterior.
4. Clique em qualquer linha para ver o caminho até aquele campo e copiar o valor.

Como ler a árvore

Cada linha mostra o nome da chave (ou a posição, dentro de um array), uma etiqueta com o tipo e o valor:

Os tipos não dependem só da cor: as aspas, o negrito, o itálico e a etiqueta permitem diferenciar, por exemplo, o número 42 do texto "42" — uma confusão comum ao depurar uma API. As etiquetas podem ser desligadas na opção Etiquetas de tipo.

A linha acima da árvore resume o documento: total de valores, profundidade e quantos objetos, arrays, textos, números, booleanos e nulos existem.

Caminho do campo: JSONPath, JavaScript e JSON Pointer

Ao clicar em um item, o painel abaixo da árvore mostra o endereço dele em três notações, cada uma com seu botão de copiar. Para o JSON

{
  "pedidos": [
    { "id": 7, "preço unitário": 24.9 }
  ]
}

o campo preço unitário do primeiro pedido tem estes caminhos:

• JSONPath é a linguagem de consulta padronizada na RFC 9535 (2024). O $ representa a raiz, .nome entra em uma chave e [0] em uma posição do array. Chaves com espaço, ponto, hífen ou que começam com dígito não podem usar a forma .nome, então vão entre colchetes e aspas simples. É a notação usada por ferramentas de teste de API e por bibliotecas em várias linguagens.
• JavaScript é a expressão pronta para colar no código, supondo que o objeto esteja em uma variável chamada dados — troque pelo nome da sua.
• JSON Pointer (RFC 6901) separa os passos com /. É o formato usado em JSON Patch e nas referências $ref de JSON Schema e OpenAPI. Dentro de uma chave, ~ é escrito como ~0 e / como ~1.

Copiar valor copia o texto puro quando o campo é uma string, e o JSON indentado quando é um objeto ou array — prático para extrair só um pedaço de uma resposta grande.

Busca

A busca ignora maiúsculas, minúsculas e acentos: sao encontra São Paulo. Você escolhe procurar em chaves e valores, só chaves ou só valores. Os trechos encontrados ficam destacados em amarelo, e ao pular para um resultado a árvore abre sozinha os níveis necessários para mostrá-lo. Números, true, false e null também são pesquisáveis pelo texto.

Arquivos grandes

Para não travar o navegador, a árvore só desenha o que está aberto:

• cada objeto ou array mostra 100 filhos por vez, com um link “Mostrar mais”;
• no máximo 2.000 linhas ficam na tela ao mesmo tempo — acima disso aparece um aviso, e basta recolher alguns nós ou usar a busca;
• a busca lista até 1.000 resultados;
• o limite é de 10 MB por arquivo, 500 mil valores e 400 níveis de aninhamento.

Para arquivos maiores do que isso, use uma ferramenta de linha de comando como o jq ou abra só um trecho do arquivo.

Números grandes aparecem sem alteração

Muitos visualizadores leem o arquivo com JSON.parse e, com isso, mostram valores diferentes dos que estão no arquivo: o inteiro 12345678901234567890 aparece como 12345678901234567000, porque passa do limite de 2⁵³ − 1 dos números do JavaScript, e 1.0 aparece como 1. Aqui a árvore é montada a partir do texto original, então números são exibidos e copiados exatamente como foram escritos. Pelo mesmo motivo, chaves repetidas em um objeto aparecem todas e a ordem das chaves é a do arquivo.

Navegação pelo teclado

Com o foco na árvore: ↑ e ↓ percorrem as linhas; → expande o nó (ou desce para o primeiro filho, se já estiver aberto); ← recolhe (ou sobe para o pai); Home e End vão para a primeira e a última linha; Enter abre e fecha. A árvore usa os papéis de acessibilidade tree e treeitem, então leitores de tela anunciam nível, posição e se o nó está aberto.

Ferramentas relacionadas

• Formatador de JSON — indenta o JSON como texto.
• Validador de JSON — confere se a sintaxe está correta.
• Minificador de JSON — compacta em uma linha sem alterar números.
• Comparador de JSON — mostra as diferenças entre dois documentos.
• Decodificador de JWT — abre o cabeçalho e o payload JSON de um token.

Perguntas frequentes

Como abrir um arquivo .json no navegador?

Clique em Abrir arquivo .json ou arraste o arquivo para a caixa de texto. Ele é lido localmente, sem upload, e a árvore aparece em seguida.

O que significa o $ no caminho?

No JSONPath, $ é a raiz do documento. $.cliente.nome quer dizer: a partir da raiz, entre na chave cliente e depois em nome.

Por que algumas chaves aparecem entre colchetes no caminho?

Porque a forma abreviada com ponto só vale para nomes simples (letras, dígitos e sublinhado, sem começar por dígito). Uma chave como preço unitário, data-nascimento ou 2026 precisa da forma ['...'] no JSONPath e ["..."] no JavaScript.

O visualizador mostra erro em JSON inválido?

Sim. Se o texto não for um JSON válido, a ferramenta indica a linha, a coluna e o motivo. Para corrigir e conferir com calma, use o Validador de JSON.

Meus dados ficam salvos em algum lugar?

Não. O JSON fica apenas na memória da aba e some quando você a fecha ou clica em Limpar.