Skip to content
jsonforge.app

JSON Viewer

Um workspace multi-arquivo de JSON — leia o mesmo documento como texto formatado, tabela, árvore ou grafo de relacionamentos.

No file
Loading editor…

Empty document

0 files in workspace
Invalid JSON

O que é JSON Viewer?

Um visualizador de JSON é um workspace para ler JSON em vez de editá-lo — o problema é que JSON bruto é escrito para máquinas, e uma resposta de API de 40KB num editor de texto é um muro de pontuação. Este visualizador mantém várias representações do mesmo documento lado a lado: o texto bruto de um lado e, do outro, uma visão formatada, uma tabela de registros estilo planilha, uma árvore expansível ou um grafo de relacionamentos mostrando como arrays aninhados se ligam de volta aos seus pais. Como perguntas diferentes precisam de formas diferentes — "quais campos isto tem" é uma pergunta de árvore, "qual destes 200 registros tem e-mail null" é uma pergunta de tabela — alternar entre elas vence rolar a página. Os arquivos que você abre ficam num workspace local, para que você possa manter vários documentos ao mesmo tempo e voltar a eles depois, e todos permanecem no seu navegador.

Como usar JSON Viewer

  1. Clique em "New" na barra lateral de arquivos para adicionar um documento, ou cole JSON direto no editor na coluna do meio.
  2. Escolha uma visão à direita — Pretty para texto formatado, Table para registros em linhas, Tree para um esboço expansível, Relationship para um grafo de como arrays aninhados se conectam.
  3. Use a caixa de busca acima da lista de arquivos para encontrar um documento quando o workspace tiver mais que um punhado.
  4. Baixe o arquivo ativo com o botão de download ou copie-o com o botão de copiar. A barra de status mostra a contagem de registros e se o documento atualmente passa pelo parse.

Exemplos

Um array de registros se torna uma tabela

Entrada

{"records": [{"id": 1, "name": "John"}, {"id": 2, "name": "Jane"}]}

Saída

Visão de tabela: 2 linhas, colunas id e name — ordenável, com busca e paginação

Arrays aninhados se tornam tabelas ligadas no grafo

Entrada

{"orders": [{"id": 1, "items": [{"sku": "A1"}, {"sku": "B2"}]}]}

Saída

Visão de relacionamentos: um nó orders ligado a um nó items com 2 linhas

Erros comuns

  • Assumir que o workspace é sincronizado — ele vive no armazenamento de um navegador, então limpar os dados do site ou trocar de dispositivo o perde. Baixe tudo o que precisar manter.
  • Recorrer à visão Table num documento que não é uma coleção de registros; um objeto de configuração profundamente aninhado não tem linhas naturais, e a visão Tree serve melhor para ele.
  • Editar na coluna do meio e esperar que o arquivo original no disco mude — isto é uma cópia local, e salvar significa baixá-lo de volta.

Por que usar esta ferramenta

  • Quatro visões do mesmo documento, alternáveis sem recolar nada nem perder o lugar.
  • Um workspace persistente de múltiplos arquivos, então comparar a resposta de API de ontem com a de hoje não significa gerenciar abas do navegador.
  • Roda inteiramente no cliente e funciona offline depois de instalado, então payloads de produção nunca saem da sua máquina.

Perguntas frequentes