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 ou expressão similar?

JSONPath ($ para raiz, .chave para filho, [n] para índice de array, .. para descida recursiva, [?(@.campo=='x')] para filtro) e JMESPath (um superset mais estrito com multiselect e projeções) são as duas linguagens de consulta dominantes para JSON. Permitem escrever expressões como $.store.book[?(@.price < 10)].title para extrair o título de cada livro abaixo de 10 dólares sem escrever código imperativo. Este visualizador foca em navegar em vez de consultar, então para avaliar uma expressão JSONPath abra nossa ferramenta dedicada JSON Path Finder, cole o mesmo documento e digite a expressão. 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.

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 ponto)
• Copiar valores individuais para área de transferência
• 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