Pular para o conteúdo
Mock and Match

Transform - Formatador de JSON

Formata um JSON compacto em um JSON legível, com indentação configurável. Tudo processado no navegador.

Processado localmente
Transformação

Opções

Input

Carregando editor...

Output

Clique em "Transformar" para ver o resultado aqui.

Para que serve o Transform

O Transform converte dados e código de um formato para outro sem sair do navegador. Cole um JSON e receba as interfaces TypeScript, o schema Zod ou o JSON Schema correspondentes; converta arquivos de configuração entre YAML, JSON e TOML; transforme CSS em classes Tailwind. Tudo é processado localmente, sem enviar o seu conteúdo para servidor algum.

Como usar

  1. Clique no seletor Transformação e escolha a conversão. Dá para buscar pelo nome, e as últimas usadas e as favoritas ficam à mão.
  2. Cole o conteúdo no campo Input (ou use o botão Colar). Para JSON, o botão Formatar deixa o texto indentado.
  3. Se a conversão tiver opções, como o nome do tipo raiz, ajuste-as no painel acima dos editores.
  4. Clique em Transformar. O resultado aparece em Output, onde você pode copiar ou baixar o arquivo.

Exemplo: JSON para TypeScript

A conversão JSON → TypeScript lê a estrutura do JSON e gera uma interface para cada objeto, incluindo os objetos aninhados. Este é o resultado real da ferramenta para o JSON abaixo:

Entrada (JSON)
{
  "id": 1,
  "nome": "Ana Souza",
  "email": "ana@exemplo.com",
  "ativo": true,
  "tags": ["admin", "beta"],
  "endereco": { "cidade": "São Paulo", "cep": "01310-100" }
}
Saída (TypeScript)
interface Endereco {
  cidade: string;
  cep: string;
}

interface Usuario {
  id: number;
  nome: string;
  email: string;
  ativo: boolean;
  tags: string[];
  endereco: Endereco;
}

Precisa validar os dados em tempo de execução, e não só tipá-los? A mesma entrada pode virar um schema Zod escolhendo JSON → Zod no seletor.

Conversões disponíveis

JSON

TOON

  • JSON → TOONConverte um JSON em TOON (Token-Oriented Object Notation), formato compacto para reduzir tokens em prompts de LLM.
  • TOON → JSONConverte TOON (Token-Oriented Object Notation) de volta em JSON, sem perdas.

YAML

XML

TypeScript

CSS

  • CSS → TailwindConverte propriedades CSS em classes utilitárias do Tailwind (v3.1+), usando valores arbitrários quando não há uma classe exata.
  • CSS → JS ObjectConverte CSS em um objeto JavaScript de estilos (React inline styles / styled-components).
  • CSS → Template LiteralEnvolve o CSS em uma template literal `css`...`` (styled-components / emotion), reformatado.

Antes de usar o resultado

Revise o que foi gerado

Os tipos e schemas são inferidos de um único exemplo. Eles são um ótimo ponto de partida, mas não substituem o contrato oficial da sua API: confira campos opcionais, valores nulos e uniões antes de colocar em produção.

Perguntas frequentes

Meus dados são enviados para algum servidor?

Não. A conversão acontece no seu navegador e o que você cola ou digita não é enviado para lugar nenhum. Nas conversões que envolvem TypeScript, o compilador é baixado do próprio site na primeira vez que você usa, e só o código do compilador é baixado, nunca o seu conteúdo sai do navegador.

Quais conversões estão disponíveis?

19 conversões: formatador e minificador de JSON; de JSON para TypeScript, Zod, JSON Schema, YAML, XML, GraphQL e TOON (o formato compacto para prompts de LLM); de TOON de volta para JSON; de YAML para JSON e TOML; de XML para JSON; de TypeScript para JavaScript, Zod e JSON Schema; e de CSS para classes Tailwind, objeto JavaScript e template literal.

Qual é o tamanho máximo do conteúdo?

O campo de entrada aceita até 10.000.000 de caracteres. Se você colar algo maior, a ferramenta avisa o tamanho e não cola nada, para o navegador não travar.

Por que meu JSON dá erro?

A mensagem de erro indica a posição do problema (linha e coluna). As causas mais comuns são aspas simples no lugar de aspas duplas, vírgula sobrando depois do último item, chaves sem aspas e comentários, que o formato JSON não permite.

Como o Transform trata listas com objetos diferentes?

Quando os itens de uma lista têm formatos diferentes, a ferramenta gera um tipo para cada formato e os combina em uma união (por exemplo, Pedido | Pedido1). Se você prefere um único tipo com campos opcionais, ajuste manualmente depois de gerar.

Os tipos gerados são definitivos?

Eles são inferidos a partir do exemplo que você fornece. Um campo nulo no exemplo vira null, uma lista vazia vira unknown[], e um campo ausente em alguns itens não é marcado como opcional. Use um exemplo representativo e revise o resultado antes de usar em produção.

A conversão de TypeScript para Zod cobre tudo?

Ela preserva objetos, listas, campos opcionais (key?: T ou T | undefined), valores nulos (T | null vira .nullable()), uniões de valores literais (viram z.enum) e apelidos de tipo usados nas interfaces. Ainda ficam simplificados, como z.unknown(), os genéricos, os utilitários do TypeScript (Partial, Pick, Record), as intersecções (&), as tuplas, os enums do TypeScript e o tipo Date. Revise o schema gerado.

A ferramenta é gratuita?

Sim, é gratuita e não exige cadastro nem conta.