JSON Preview
Visualize JSON como texto formatado, tabela, diagrama de relacionamentos ou árvore — troque de visão instantaneamente.
Entrada JSON
JSON embelezado
Digite JSON à esquerda para visualizá-lo.
O que é JSON Preview?
O JSON Preview é uma forma tudo-em-um de olhar para um documento JSON sem decidir de antemão qual visão você precisa. Cole ou carregue qualquer JSON e ele abre como texto formatado e indentado — a mesma aparência que você obteria de um formatador — mas um alternador acima da pré-visualização permite transformar o mesmo documento em uma tabela ordenável/pesquisável, um diagrama de relacionamentos mostrando como arrays aninhados se ligam de volta aos seus registros pai, ou uma árvore expansível para saltar direto a uma chave profundamente aninhada. Como toda visão lê a mesma entrada, não há recolar ou reenviar para comparar representações — você está apenas olhando um documento por uma lente diferente.
Como usar JSON Preview
- Cole ou digite JSON na caixa de entrada à esquerda — ou arraste um arquivo .json sobre ela, ou carregue uma das amostras embutidas da barra de ferramentas.
- O painel direito abre em "Beautify" por padrão: seu JSON reindentado e com realce de sintaxe, com um botão de copiar em um clique.
- Use as abas de ícone acima da pré-visualização para mudar para Table (linhas e colunas achatadas), Relationship (tabelas vinculadas para arrays aninhados) ou Tree (um esboço expansível e pesquisável).
- Continue editando à esquerda — toda visão é atualizada ao vivo, então você pode alternar entre representações enquanto trabalha em vez de se comprometer com uma.
Exemplos
Visão Beautify
Entrada
{"id":1,"name":"Ada Lovelace","roles":["admin","editor"]}
Saída
{ "id": 1, "name": "Ada Lovelace", "roles": [ "admin", "editor" ] }
Visão Table (mesma entrada)
Entrada
[{"id":1,"name":"Ada"},{"id":2,"name":"Grace"}]
Saída
Uma tabela de duas linhas e duas colunas (id, name) — ordenável, filtrável, exportável para CSV.
Erros comuns
- Esperar que a visão Table mostre arrays aninhados um-para-muitos inline — eles se tornam sua própria tabela vinculada, visível na visão Relationship.
- Assumir que um erro de análise em uma visão significa que o JSON é inteiramente inválido, quando pode ser apenas uma forma que Table/Relationship não conseguem representar (a visão Tree ainda o mostrará).
- Não conferir a caixa de pesquisa da visão Tree ao caçar uma única chave profundamente aninhada — é mais rápido do que expandir manualmente cada nível.
Por que usar esta ferramenta
- Uma entrada, quatro visões — sem recolar JSON em ferramentas separadas de formatação, tabela e árvore para comparar representações.
- Roda inteiramente no cliente, então respostas de API sensíveis ou configurações nunca saem do navegador.
- A visão de relacionamentos detecta automaticamente arrays aninhados um-para-muitos e diagrama como eles se ligam de volta ao pai, o que uma tabela plana ou um formatador comum não conseguem mostrar.
- Trocar de visão é instantâneo e não destrutivo — útil para explicar a forma de um JSON a um colega de equipe sem exportar vários arquivos.