Um JSON beautifier que nunca vê o seu JSON.

Um JSON beautifier lê um documento, faz o parse dele até obter uma árvore de objetos, arrays, strings, números, booleanos e nulos, e escreve essa árvore de volta com um valor por linha e uma indentação constante. A palavra importante é parse. Ele não está inserindo quebras de linha depois de cada vírgula com uma expressão regular, que é como fazem muitos trechos de código espalhados pela web, e que destrói em silêncio qualquer string que contenha uma vírgula ou uma chave.

Isso tem uma consequência que aparece de imediato: um documento que não é JSON válido não pode ser embelezado. Não há árvore para imprimir. É por isso que aqui embelezar e validar são a mesma operação e não dois botões, e por isso um texto colado inválido devolve linha, coluna e uma descrição do que era esperado, em vez de um painel de saída vazio.

Espaços em branco fora das strings não significam nada em JSON. A RFC 8259 permite espaço, tabulação, retorno de carro e quebra de linha entre dois tokens quaisquer, então reformatar não pode mudar o que um documento significa. O espaço dentro de uma string é dado e fica exatamente como estava. Um formatador que trabalha sobre texto em vez de sobre uma árvore sintática não distingue esses dois casos, e essa é a forma mais comum de a formatação corromper um payload.

A ordem das chaves é preservada. A especificação considera os objetos como não ordenados, então nada deveria depender disso, mas a ordem em que você colou é quase sempre a que um diff, uma revisão de código ou uma pessoa lendo espera, e reordenar chaves deixa qualquer comparação posterior ruidosa sem ganho nenhum.

Cole no painel da esquerda e aperte Embelezar. O documento formatado aparece à direita, pronto para copiar ou baixar. Não há conta, não há etapa de upload, não há cota diária e não há paywall em parte alguma, que é o que a maioria das pessoas quer dizer ao procurar por JSON beautifier online grátis e não pela versão de teste de um produto de desktop.

A indentação padrão é de dois espaços, que é onde a maioria dos ecossistemas e dos guias de estilo acabou parando. Quatro espaços e tabulações também estão disponíveis se o seu repositório já tomou essa decisão por você, e a escolha é lembrada localmente no navegador em vez de em um servidor, porque não existe servidor algum para lembrá-la.

Tudo roda em um Web Worker, então a interface continua respondendo enquanto um documento é analisado. Um payload de 100 KB é formatado em cerca de 9 a 13 ms, 1 MB em 70 a 119 ms, e 10 MB em cerca de 0,6 a 0,8 segundo, medido em uma máquina de mesa ao longo de duas execuções. Trate isso como uma faixa e não como um benchmark, mas o formato é o que importa: 10 MB são trabalho suficiente para congelar por completo uma thread principal, e aqui isso não roda em uma.

Depois da primeira visita a página fica em cache, então este JSON beautifier online continua funcionando com a rede desconectada. Não é um truque de service worker. É o resultado natural de uma página estática que faz o seu trabalho localmente: sem rede, o ping do analytics simplesmente falha, e todas as ferramentas seguem funcionando, porque nenhuma delas precisava de um servidor para começar.

A maioria dos formatadores é uma área de texto e um botão. Entra o texto colado, sai o texto formatado, e se o documento estava quebrado você volta ao seu próprio editor para adivinhar. O painel daqui é um editor de código de verdade, com realce de sintaxe, correspondência de chaves, dobramento de código, busca incremental e marcadores de erro na própria linha, então você pode consertar o que colou e reformatar sem sair da página.

O dobramento importa mais do que parece. Um arquivo de configuração de 4.000 linhas não fica legível só porque está indentado. O que o torna realmente legível é recolher todos os ramos exceto aquele que interessa, e isso é uma propriedade do editor, não do formatador.

Se você quiser o mesmo documento como uma árvore recolhível em vez de texto, o visualizador de JSON mostra assim. A validação relata todos os problemas em vez de parar no primeiro. O reparo lida com quase-JSON, como aspas simples, vírgulas finais e chaves sem aspas, e lista cada mudança feita para que você possa rejeitar as que foram decisões discutíveis e não correções.

Quem procura o melhor visualizador e JSON beautifier online normalmente não está perguntando sobre indentação, que toda ferramenta acerta. Está perguntando sobre os documentos que quebram as ferramentas: inteiros maiores do que o JavaScript consegue guardar, chaves duplicadas e caracteres invisíveis colados de um cliente de chat ou de um processador de texto. Isso é tratado aqui, está descrito acima com saída real, e é a única parte sobre a qual vale a pena discutir.

Uma aba do navegador nem sempre é onde você quer que isso aconteça. Se o arquivo já está aberto no seu editor, o JSON beautifier mais rápido é o que está preso a uma tecla lá.

O Notepad++ não traz formatador de JSON. A resposta habitual é o plugin JSTool: abra Plugins, depois Plugins Admin, procure JSTool, instale, reinicie, e o comando aparece em Plugins, JSTool, JSFormat. Funciona, e para payloads do dia a dia é a ferramenta certa. Saiba que o JSTool faz o parse dos números como floats de 64 bits, então um ID no estilo Twitter ou Snowflake acima de 9007199254740991 volta com dígitos diferentes dos que entraram, sem avisar.

O Sublime Text usa o pacote Pretty JSON, instalado pelo Package Control e associado a Ctrl+Alt+J por padrão. Ele formata através do Python, o que significa que inteiros grandes sobrevivem exatos, uma vantagem real sobre as opções baseadas em JavaScript. Em compensação, descarta chaves duplicadas sem dizer nada, ficando com a última.

O VS Code não precisa de plugin algum. Formatar Documento, que é Shift+Alt+F no Windows e no Linux e Shift+Option+F no macOS, formata qualquer arquivo que o editor reconheça como JSON. Há também um comando Format JSON na paleta.

O que nenhum deles entrega é um diagnóstico. Eles formatam um documento válido e recusam um inválido, o que é ótimo até o dia em que o documento é inválido e tem 40.000 linhas. É para esse caso que esta página foi feita, e também para uma máquina em que você não tem permissão de instalar plugins.

Uma extensão de JSON beautifier para Chrome faz algo genuinamente útil: intercepta respostas servidas como application/json e as mostra formatadas e recolhíveis na barra de endereços, de modo que uma API que você está explorando fica legível sem passar por um formatador. O Firefox faz isso de forma nativa desde a versão 44 e não precisa de extensão alguma.

Vale ler o custo antes de instalar uma. Para reescrever a página de qualquer API que você visite, a extensão precisa pedir permissão para ler e alterar os seus dados em todos os sites, que é a permissão mais ampla que o Chrome concede. Essa permissão cobre o seu banco, o seu e-mail e o console de administração da sua empresa, e persiste através de cada atualização silenciosa que a extensão publicar depois. Uma extensão de JSON beautifier é algo razoável de instalar vindo de um mantenedor em quem você tem motivos para confiar, e algo ruim de instalar porque era o primeiro resultado.

Esta página não precisa de nada disso. Funciona igual no Chrome, no Firefox, no Safari e no Edge, não instala nada e não detém permissão alguma sobre nenhum outro site que você visita, porque uma página não é uma extensão: ela consegue ler a si mesma e mais nada. Colar é uma tecla a mais do que uma extensão que intercepta, e é toda a diferença.

Você não precisa de uma biblioteca para isso. JSON.stringify aceita um terceiro argumento que controla a indentação, e existe em todo runtime JavaScript: JSON.stringify(valor, null, 2) indenta com dois espaços, e passar uma string em vez de um número, como em JSON.stringify(valor, null, "\t"), indenta com tabulações.

É na hora de jogar o resultado dentro de uma página que um JSON beautifier em HTML dá errado. A saída precisa ficar dentro de um elemento <pre> ou cada sequência de espaços colapsa e você desfez a formatação, e precisa passar por escape antes de ser inserida como HTML. Caso contrário, um valor de string que contenha </script> ou um sinal de menor está sendo entregue ao parser como marcação, o que é um buraco de cross site scripting com passos extras.

No React esse escape já está feito para você. <pre>{JSON.stringify(dados, null, 2)}</pre> é, por inteiro, um JSON beautifier em React para fins de depuração, e como o React faz escape de texto interpolado por padrão, é seguro mesmo com entrada não confiável. A regra é simplesmente nunca recorrer a dangerouslySetInnerHTML para exibir JSON, que é a única maneira de perder essa garantia.

A ressalva que vale para todos esses casos é a precisão numérica. JSON.parse transforma todo número em um double, então um identificador acima de 2^53-1 já é o número errado antes mesmo de JSON.stringify vê-lo, e formatação nenhuma traz os dígitos de volta. Se o seu payload carrega IDs grandes, leia antes o que acontece com um inteiro acima de 2^53-1. O beautifier desta página reemite os dígitos exatos que você colou, que é a razão de a saída dele e uma ida e volta por JSON.parse nem sempre coincidirem.