Transform
Converta dados e código entre formatos — JSON, TypeScript, Zod, YAML, XML e mais — tudo no navegador.
Opções
Input
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
- 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.
- Cole o conteúdo no campo Input (ou use o botão Colar). Para JSON, o botão Formatar deixa o texto indentado.
- Se a conversão tiver opções, como o nome do tipo raiz, ajuste-as no painel acima dos editores.
- 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:
{
"id": 1,
"nome": "Ana Souza",
"email": "ana@exemplo.com",
"ativo": true,
"tags": ["admin", "beta"],
"endereco": { "cidade": "São Paulo", "cep": "01310-100" }
}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
- JSON → TypeScriptConverte um JSON em interfaces TypeScript.
- JSON → ZodConverte um JSON em um schema Zod.
- JSON → JSON SchemaConverte um JSON em um documento JSON Schema (draft 2020-12).
- JSON → YAMLConverte um JSON em YAML.
- JSON → XMLConverte um JSON em XML.
- JSON → GraphQLConverte um JSON em um tipo GraphQL (SDL). Campos chamados "id" viram ID.
YAML
- YAML → JSONConverte YAML em JSON.
- YAML → TOMLConverte YAML em TOML.
XML
- XML → JSONConverte XML em JSON.
TypeScript
- TypeScript → JavaScriptRemove as anotações de tipo, gerando o JavaScript equivalente.
- TypeScript → ZodConverte uma interface ou type do TypeScript em um schema Zod equivalente.
- TypeScript → JSON SchemaConverte uma interface ou type do TypeScript em um documento JSON Schema (draft 2020-12).
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?
15 conversões: de JSON para TypeScript, Zod, JSON Schema, YAML, XML e GraphQL; 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.