Visualizador de Árvore JSON

Visualizador de Árvore JSON - Explorador e Visualizador Interativo de Dados JSON

Um poderoso visualizador de árvore JSON online que ajuda você a visualizar, explorar e entender estruturas de dados JSON complexas. Apresenta uma interface de árvore interativa recolhível, destaque de sintaxe, busca em tempo real, cópia de caminho, modo tela cheia e opções de visualização personalizáveis. Perfeito para desenvolvedores, testadores de API, analistas de dados e qualquer pessoa trabalhando com dados JSON aninhados.

Por que meu JSON é inválido mesmo parecendo correto?

Os culpados mais comuns são vírgulas no final, chaves sem aspas, aspas simples e comentários soltos — todos válidos em JavaScript mas proibidos pela especificação JSON (RFC 8259). O JSON estrito exige chaves e strings entre aspas duplas, sem vírgula depois do último item de um array ou objeto e sem comentários de nenhum tipo. Outros erros frequentes incluem usar barras invertidas sem escape dentro de strings (escreva \\ para uma única barra invertida), caracteres de controle não escapados como uma quebra de linha crua e copiar "aspas tipográficas" (“”) de um processador de texto em vez de aspas retas (""). Este visualizador mostra o primeiro erro de parsing com a linha e coluna exatas para você pular direto ao caractere problemático. Se precisar consumir entrada não estrita de um arquivo de configuração, cole-a em um conversor JSON5 primeiro e depois passe o resultado limpo por este visualizador.

Qual a diferença entre objetos e arrays JSON na visualização em árvore?

JSON tem dois tipos de contêineres e o visualizador os marca de forma diferente. Objetos são coleções não ordenadas de membros nomeados e aparecem como {} com pares chave:valor; o visualizador mostra o nome da chave em uma cor distinta e a especificação não garante ordem. Arrays são sequências ordenadas e aparecem como [] com índices numéricos 0, 1, 2…; a ordem importa e deve ser preservada. Dentro de ambos você pode aninhar qualquer valor: string, número, booleano, null, outro objeto ou outro array. Use objetos quando cada elemento tem identificador estável e arrays quando os itens são intercambiáveis ou ordenados. Misturar os dois é normal: um array de objetos é o formato canônico para dados tabulares, e um objeto cujos valores são arrays é o formato canônico para dados agrupados.

Como expandir ou colapsar todos os nós de uma vez?

Use os controles Expandir Todos e Colapsar Todos no topo da árvore. Expandir Todos abre recursivamente cada objeto e array até os valores folha — útil quando quer escanear o documento inteiro ou alimentar um leitor de tela. Colapsar Todos mostra apenas as chaves de nível superior, bem mais rápido de escanear em payloads grandes. Para abrir um único ramo sem revelar seus filhos, clique diretamente no triângulo de expansão ao lado daquele nó; segure Alt (ou Option no macOS) e clique para alternar aquele nó mais todos os descendentes de uma vez. O estado de expansão atual é preservado enquanto você pesquisa, então um resultado dentro de um ramo colapsado autoexpandirá apenas o caminho necessário para revelá-lo.

Este visualizador lida com BOM UTF-8 e outros problemas de codificação?

Sim. O analisador remove uma marca de ordem de bytes UTF-8 inicial (os bytes EF BB BF, frequentemente adicionados por ferramentas Windows e algumas exportações Java) antes de analisar, então um arquivo prefixado com BOM não causará erro de sintaxe aqui. O próprio JSON, conforme RFC 8259, deve ser codificado em UTF-8, UTF-16 ou UTF-32, com UTF-8 fortemente recomendado para intercâmbio. Se você colar texto UTF-16 da área de transferência, o navegador já o terá decodificado, então raramente precisa se preocupar. O visualizador também exibe sequências de escape corretamente: \u00e9 renderiza como é, pares substitutos como \uD83D\uDE00 renderizam como um único emoji 😀, e \n é exibido como quebra de linha literal dentro de strings em vez de quebrar o layout.

O que sequências de escape como \u00e9, \n, \t e \/ realmente significam?

São os seis escapes de string definidos pelo JSON. \" insere aspas duplas, \\ insere uma barra invertida, \/ insere uma barra (legal mas opcional — a barra nunca precisa ser escapada para parsear, apenas para embutir JSON dentro de uma tag <script> HTML), \b \f \n \r \t inserem os caracteres de controle ASCII backspace, form feed, nova linha, retorno de carro e tab, e \uXXXX insere o ponto de código Unicode com valor hexadecimal XXXX. Para pontos de código acima de U+FFFF, o JSON usa pares substitutos UTF-16: \uD83D\uDE00 codifica o emoji de rosto sorrindo U+1F600. Qualquer outro escape com barra invertida (por exemplo \x41 ou \0) é erro de sintaxe em JSON estrito, mesmo que muitas linguagens aceitem essas formas em seus próprios literais.

Como consulto um valor profundamente aninhado com JSONPath?

Este visualizador possui uma barra de consulta JSONPath integrada: digite uma expressão e os nós correspondentes são destacados na árvore, com um contador de correspondências ao lado da barra. O subconjunto suportado cobre os operadores necessários para a maioria do trabalho com API: $ para a raiz, .chave para uma propriedade filha, [n] para índice de array (negativos contam do fim), [início:fim] para fatias, [*] curinga, .. para descida recursiva (ex.: $..hobbies[*] encontra cada hobby em qualquer profundidade) e um filtro simples [?(@.campo == 'valor')] com ==, !=, >, <, >=, <= sobre arrays de objetos. Exemplo: $.education[0].degree retorna o primeiro diploma e $.projects[?(@.stars > 100)] retorna os projetos com mais de 100 estrelas. Use Copiar resultado JSONPath para levar os nós à área de transferência, ou Baixar resultado JSONPath para salvá-los como arquivo .json. Para uso programático há bibliotecas em toda linguagem principal: jsonpath-plus e JMESPath.js em JavaScript, jsonpath-ng e jmespath em Python, e a função integrada JSON_TABLE em motores SQL modernos.

O que significam os números das Estatísticas (chaves, valores folha, profundidade, tamanho)?

Depois de renderizar um documento, o painel de Estatísticas resume sua forma para você dimensionar uma carga num relance, sem rolar. Chaves conta cada nome de propriedade de objeto; valores folha conta os primitivos (string, número, booleano, null) que contêm dados reais; objetos e arrays contam os nós contêineres de cada tipo; profundidade máx é quantos níveis abaixo da raiz está o valor mais profundo, o melhor indicador de quão difícil será percorrer os dados em código; e tamanho é o comprimento em bytes UTF-8 da entrada (B, KB ou MB). Essas métricas respondem perguntas comuns como 'quão profunda é esta resposta de API', 'quantos registros o endpoint retornou' (leia o comprimento do array no nó correspondente) e 'está perto de um limite de carga'. Como o tamanho em bytes é calculado do texto exato que você colou, ele corresponde ao que um servidor veria na rede antes do gzip.

Qual o maior arquivo JSON que posso colar sem travar o navegador?

Navegadores geralmente conseguem parsear JSON de até cerca de 50 MB em um desktop, mas o que realmente congela a UI é renderizar uma árvore com milhões de nós. Como regra geral, planeje abaixo de 5 MB ou abaixo de 100 000 valores folha para uma experiência interativa fluida; além disso o visualizador usa renderização virtualizada e desenha apenas nós visíveis. Para arquivos maiores que 100 MB você deve fazer streaming dos dados com um parser estilo SAX em vez de carregar o documento todo na memória: ijson em Python, JSONStream em Node ou Jackson Streaming API em Java permitem percorrer o documento evento por evento e processar registros conforme chegam. Para conjuntos verdadeiramente massivos, mude o formato para NDJSON (um valor JSON por linha) ou Parquet para poder ler e filtrar sem nunca materializar o documento inteiro.

Por que números grandes como 9007199254740993 aparecem incorretos?

JSON permite qualquer número decimal com precisão arbitrária, mas JavaScript parseia cada número em um double IEEE 754 de 64 bits, que só pode representar inteiros exatos até 2^53 − 1 = 9 007 199 254 740 991 (o valor de Number.MAX_SAFE_INTEGER). Valores maiores arredondam silenciosamente para o double mais próximo representável, então 9007199254740993 vira 9007199254740992. Isso atinge qualquer um usando JSON para transportar IDs de banco de dados, IDs snowflake do Twitter, valores blockchain ou timestamps em nanossegundos. A solução padrão é colocar números grandes entre aspas como string ("id": "9007199254740993") e parseá-los com BigInt ou uma biblioteca decimal no recebedor. JSON5 e alguns parsers streaming oferecem uma opção "use BigInt para inteiros fora do intervalo seguro", mas JSON.parse do navegador comum não, então sempre verifique se o produtor está colocando inteiros grandes entre aspas antes de confiar em comparações de igualdade.

Recursos Principais

• Estrutura de árvore interativa recolhível para navegação fácil
• Destaque de sintaxe com tipos de dados codificados por cor
• Expandir tudo / recolher tudo para operações em massa
• Expandir para níveis específicos (1, 2, 3 ou todos)
• Busca em tempo real para encontrar chaves e valores
• Copiar caminho JSON para qualquer nó (notação de colchetes para arrays, ex.: users[0].name)
• Copiar valores individuais para área de transferência
• Baixar o documento completo como JSON formatado
• Baixar o resultado de uma consulta JSONPath como arquivo .json
• Mostrar/ocultar tipos de dados para visualização mais clara
• Mostrar/ocultar índices de array
• Modo tela cheia para estruturas JSON grandes
• Suporte a modo escuro com alternância de tema
• Formatar JSON minificado ou não formatado
• Carregar JSON de exemplo para teste
• Lida com objetos e arrays profundamente aninhados
• Indicadores visuais para objetos, arrays e primitivos
• Design responsivo para mobile e desktop
• 100% lado do cliente - seus dados nunca saem do navegador
• Funciona offline após carregamento inicial
• Sem limites de tamanho de arquivo
• Renderização rápida mesmo para arquivos JSON grandes