Visualizador JSON: Formatar e Explorar Árvore

Use este visualizador JSON para formatar e explorar dados como uma árvore recolhível, expandir ou recolher nós e copiar caminhos exatos.

Seu JSON é analisado e exibido localmente no seu navegador, e nada é enviado para um servidor.

Criado e mantido por Udit Agarwal

Precisa de tipos TypeScript a partir do seu JSON? Experimente a ferramenta JSON para TypeScript.

Sobre Visualizador de JSON

Este visualizador json oferece um espaço de trabalho com dois painéis para ler e organizar JSON: edite, formate ou minifique seus dados na aba Texto e depois mude para a aba Visualizador para percorrê-los como uma árvore recolhível. Foi feito para desenvolvedores, engenheiros de QA e qualquer pessoa depurando uma resposta de API que precisa ver json online sem caçar em meio a um muro de texto. Expanda ou recolha nós, mergulhe em objetos e arrays aninhados e clique em qualquer valor para copiar seu caminho exato. Como visualizador de árvore json, ele também funciona como um formatador json rápido, ajudando você a embelezar payloads minificados e enxergar a estrutura num relance. Tudo roda inteiramente no seu navegador, então seus dados nunca saem do dispositivo e nada é enviado para um servidor.

Recursos

  • Layout de dois painéis: uma aba Texto para editar e formatar, uma aba Visualizador para explorar
  • Visualização em árvore recolhível para expandir e recolher objetos e arrays aninhados
  • Botões Expandir tudo e Recolher tudo para remodelar o documento inteiro de uma vez
  • Clique em qualquer nó para ver seu caminho completo (por exemplo, author.links) na barra inferior
  • Copie o caminho de um nó com um clique para usar em código ou consultas
  • Formate para embelezar ou Minifique para compactar JSON bruto na aba Texto
  • Baixe o JSON formatado ou copie o documento inteiro instantaneamente
  • Roda inteiramente no seu navegador, sem nada enviado para um servidor

Como usar Visualizador de JSON

  1. Cole ou digite seu JSON na aba Texto.
  2. Clique em Formatar para embelezá-lo, ou em Minificar para compactá-lo, e confirme que é válido.
  3. Mude para a aba Visualizador para ver a árvore recolhível.
  4. Use Expandir tudo ou Recolher tudo, ou clique em nós individuais para mergulhar.
  5. Clique em um valor e copie seu caminho na barra inferior.

Exemplo

Entrada

{"author":{"name":"Ada","links":["site","blog"]}}

Saída

{
  "author": {
    "name": "Ada",
    "links": [
      "site",
      "blog"
    ]
  }
}

Formatado na aba Texto; ao clicar no primeiro link no Visualizador, aparece o caminho author.links[0].

Erros comuns e solução de problemas

  • A aba Visualizador está vazia ou não mostra nada para expandir. — Verifique na aba Texto se há um erro de sintaxe, como uma vírgula sobrando ou uma chave sem aspas; a árvore só renderiza JSON válido.
  • Um trecho colado tem aspas simples ou chaves no estilo JavaScript. — JSON exige chaves e valores de string com aspas duplas. Converta as aspas simples em aspas duplas antes de visualizar.
  • Um documento enorme parece lento ao expandir. — Use Recolher tudo primeiro e depois expanda apenas os ramos que você precisa, em vez de abrir todos os nós de uma vez.
  • Você copiou um caminho, mas ele não corresponde ao seu código. — Os caminhos usam notação de ponto e colchete a partir da raiz; ajuste para a sintaxe de acesso da sua linguagem, se ela for diferente.

Perguntas frequentes

Para que serve o Visualizador JSON?
O Visualizador JSON permite formatar, minificar e explorar JSON como uma árvore recolhível, para que você leia respostas de API e arquivos de configuração sem examinar um muro de texto bruto.
Como obtenho o caminho de um valor no Visualizador JSON?
Clique em qualquer nó na aba Visualizador e seu caminho, por exemplo author.links, aparece na barra inferior, pronto para copiar.
Posso expandir ou recolher a árvore inteira de uma vez?
Sim. Use os botões Expandir tudo e Recolher tudo na barra de ferramentas para remodelar o documento inteiro com um clique.
O Visualizador JSON também formata e minifica meu JSON?
Sim. A aba Texto embeleza ou compacta JSON bruto com os botões Formatar e Minificar, e a aba Visualizador então o exibe como uma árvore navegável.
Meu JSON é enviado para algum lugar quando uso o Visualizador JSON?
Não. O Visualizador JSON processa tudo localmente no seu navegador, então seus dados nunca saem do dispositivo e nada é enviado.
Como o Visualizador JSON lida com JSON inválido?
A aba Visualizador precisa de JSON válido para construir a árvore; corrija os erros sinalizados na aba Texto, incluindo a linha e coluna, e a árvore será renderizada.

Ferramentas relacionadas

Mais ferramentas de JSON

  • JSON para TypeScript — Gere interfaces de TypeScript a partir de uma amostra JSON.
  • JSON para CSV — Converta um array de objetos JSON planos para CSV.
  • Escapar / Desescapar JSON — Escape texto para uma string JSON ou desescape uma string JSON para texto sem formatação.
  • JSON para código — Gere tipos de Go, Rust, Python, Java, Kotlin, C# e TypeScript a partir de JSON.
  • JSON Diff — Compare dois documentos JSON e veja um diff estrutural do que mudou.
  • Gerador de JSON Schema — Gere um JSON Schema de uma amostra ou valide um documento e veja cada erro.
  • JSON Flatten — Achate JSON aninhado em chaves com notação de ponto ou desfaça de volta, no seu navegador.
  • JSON para Zod — Gere um schema Zod a partir de um JSON de exemplo, inferindo tipos, arrays e objetos aninhados.
  • JSON para Pydantic — Gere classes de modelo Pydantic v2 a partir de um JSON de exemplo, com Optional, aliases e BaseModels aninhados.
  • Avaliador JSONPath — Teste expressões JSONPath contra o seu JSON e veja valores e caminhos correspondentes ao vivo.
  • JSON para TOON — Converta JSON para TOON e de volta; o TOON empacota os mesmos dados em menos tokens de prompt de LLM.
  • Playground jq — Rode filtros jq contra JSON no seu navegador com o motor jq 1.8.2 real.

Ver todas as ferramentas de JSON (29) · Todas as ferramentas