Visualizador de árvore JSON

JSON, o formato de dados que venceu

Douglas Crockford publicou JSON em json.org em 2001 como uma alternativa leve ao XML, retirando a sintaxe diretamente dos literais de objeto do JavaScript. O formato foi primeiramente padronizado como um Internet-Draft IETF na RFC 4627 (julho de 2006), depois revisado como RFC 7159 (março de 2014), e finalmente estabelecido na RFC 8259 (dezembro de 2017), que é o padrão atual e é mantido alinhado com ECMA-404 (1ª edição outubro de 2013, 2ª edição dezembro de 2017). A RFC 8259 adicionou um requisito significativo: a codificação ao nível de rede deve ser UTF-8. Duas specs complementares completam o ecossistema: RFC 6901 «JSON Pointer» (abril de 2013) define a sintaxe /store/book/0/title para endereçar nós dentro de um documento, e RFC 6902 «JSON Patch» define um documento JSON que descreve mudanças a aplicar a outro documento JSON. JSON Schema (rascunho IETF atual 2020-12) adiciona validação. Todo o resto construído em cima, JSONC para comentários em arquivos de configuração, JSON5 para sintaxe relaxada, NDJSON para streaming, veio depois.

Os seis tipos de valor JSON (e o que está faltando)

A RFC 8259 §3 define exatamente seis tipos de valor. Não há mais nada.

• objeto: conjunto não ordenado de pares nome-valor delimitados por chaves. As chaves são sempre strings.
• array: lista ordenada de valores delimitados por colchetes. Pode conter tipos mistos.
• string: caracteres Unicode entre aspas duplas. Aspas simples não são JSON válido.
• número: ponto flutuante de dupla precisão IEEE 754. A spec não garante precisão arbitrária; números além de Number.MAX_SAFE_INTEGER = 2⁵³ − 1 = 9 007 199 254 740 991 perdem precisão ao serem parseados.
• true / false: literais booleanos, minúsculos, sem aspas.
• null: o literal null, minúsculo, sem aspas. Uma chave com valor null é diferente de uma chave ausente.

O que o JSON não tem: um tipo de data (a convenção é uma string ISO 8601 com fuso horário), comentários (use um campo de metadados separado), vírgulas finais, strings entre aspas simples, números hexadecimais, undefined, NaN ou Infinity. Qualquer um deles fará JSON.parse lançar SyntaxError.

JSON estrito, JSONC, JSON5: qual é qual

JSON estrito (RFC 8259) é o que este visualizador aceita: sem comentários, sem vírgulas finais, chaves entre aspas duplas, strings entre aspas duplas. JSONC é uma convenção da Microsoft enviada no VS Code que permite comentários de linha // e comentários de bloco /* ... */ mantendo tudo o mais estrito; você o vê em tsconfig.json, .vscode/settings.json, e o pacote npm jsonc-parser. JSON5 (2017, https://json5.org) é um superconjunto que adiciona strings entre aspas simples, chaves sem aspas, vírgulas finais, números hexadecimais, valores especiais IEEE 754 (NaN, Infinity), e comentários de linha e bloco; o pacote npm json5 tem aproximadamente 10 milhões de downloads semanais. NDJSON / JSON Lines (https://jsonlines.org) é uma variante de streaming onde cada linha é um documento JSON independente, usado por shippers de logs e pipelines de ingestão big-data. Remova comentários e vírgulas finais antes de colar se sua fonte for JSONC ou JSON5.

Onde um visualizador de árvore realmente ganha seu sustento

• Inspeção de resposta de API. Stripe, GitHub, Slack, Twilio: toda API moderna retorna JSON aninhado. Colar em um visualizador de árvore torna a forma óbvia.
• Arquivos de configuração. package.json, tsconfig.json, composer.json, kubeconfig, e a longa cauda de configs JSON de provedores de nuvem todos se tornam mais fáceis de auditar como uma árvore.
• Inspeção de exportação de banco de dados. Saída do MongoDB find(), linhas PostgreSQL row_to_json, listas de hits ElasticSearch.
• Descoberta de esquema. Quando uma API não tem documentação, o visualizador de árvore é a documentação.
• Preparação de diff. Antes de executar json-diff ou jq entre dois arquivos, inspecione cada um em um visualizador para detectar manualmente diferenças óbvias.
• Inspeção de carga útil de webhook. Stripe, GitHub, SendGrid, e serviços similares enviam todos webhooks JSON. Colar a carga útil em um visualizador é a maneira mais rápida de verificar o que seu endpoint receberá.
• Criação de dados de amostra. Construa uma fixture de teste digitando JSON e observe a árvore atualizar incrementalmente; captura chaves faltando antes de salvar o arquivo.

Erros comuns ao trabalhar com JSON

• Vírgulas finais. {"a": 1,} é JavaScript válido mas JSON inválido. JSON.parse lança SyntaxError: Unexpected token '}'. Remova-as ou mude para JSON5.
• Comentários. // assim ou /* assim */ são válidos em JavaScript e JSONC mas não em JSON estrito.
• Perda de precisão em inteiros grandes. IDs do Twitter e Stripe podem exceder 2⁵³; JSON.parse("9007199254740993") retorna 9007199254740992. Receba-os como strings se a precisão importa.
• Confundir null com ausente. {"foo": null} tem foo definido como null; {} tem foo indefinido. A distinção importa para contratos de API e tratamento NULL no banco.
• Chaves duplicadas. A RFC 8259 diz que o comportamento é indefinido; na prática cada motor JS mantém o último valor. {"a": 1, "a": 2} parseia como {a: 2}.
• Referências circulares. JSON.stringify lança TypeError: Converting circular structure to JSON. Achatae ciclos, use um replacer, ou use uma biblioteca como flatted.
• Strings de data sem fuso horário. "2026-05-12" é ambígua; "2026-05-12T18:30:00Z" é ISO 8601 inequívoca em UTC. Inclua sempre o offset.

Mais perguntas frequentes

Quão grande um arquivo JSON este visualizador consegue lidar?

Parsear 1 MB com JSON.parse leva cerca de 10 ms no V8. Renderizar 100 000 nós DOM colapsados pode congelar o navegador por vários segundos. Na prática, este visualizador é confortável até cerca de 5 MB; além disso, espere lag notável durante o render. Para documentos maiores, use um parser de streaming como stream-json num Web Worker, ou pagine a entrada em pedaços.

Por que meu inteiro grande volta errado?

Números JavaScript são floats de dupla precisão IEEE 754. Inteiros até 2⁵³ − 1 = 9 007 199 254 740 991 sobrevivem a um round-trip exatamente; além disso, precisão é perdida. IDs snowflake do Twitter (64 bits), IDs de cliente Stripe, IDs de transação blockchain, e muitas chaves substitutas de banco excedem este limite. JSON.parse truncará silenciosamente. A correção é receber os IDs como strings (a maioria das APIs modernas faz) ou parsear com uma biblioteca que suporta BigInt.

O que é JSON Pointer, e onde eu o usaria?

A RFC 6901 (abril de 2013) define uma sintaxe de caminho para endereçar nós dentro de um documento JSON: /store/book/0/title seleciona o título do primeiro livro no array store. JSON Pointer é o fundamento de JSON Patch (RFC 6902), que expressa deltas de documento como arrays de pares ponteiro-e-operação. O servidor de API Kubernetes usa JSON Patch para atualizações incrementais; assim como a API REST do GitHub e muitos outros sistemas.

NDJSON / JSON Lines funciona neste visualizador?

Não. NDJSON é um valor JSON independente por linha, sem array contêiner. JSON.parse sobre o arquivo inteiro lança porque a segunda linha começa onde o primeiro objeto termina. Envolva todo o conteúdo em [ e ] e substitua cada nova linha entre objetos por uma vírgula, ou cole uma linha por vez, ou use um visualizador NDJSON dedicado.

Meu JSON é enviado a algum lugar?

Não. JSON.parse roda no motor JavaScript do seu navegador, a árvore é renderizada como nós DOM localmente, e nenhuma cópia dos seus dados é enviada pela rede. Isto é seguro para respostas de API com segredos, dados de cliente ou PII. Abra a aba Rede em DevTools e cole uma amostra: você verá zero requisições de saída durante o parsing e renderização.