Conversor de HTML para JSX
Conversor gratuito de HTML para JSX online. Cole o HTML e receba na hora um JSX limpo para React: className, htmlFor, estilos camelCase, tags autoclosed e comentários seguros, tudo no navegador.
O que o conversor de HTML para JSX faz?
Ele transforma marcação HTML comum em JSX que o React consegue renderizar. Cole o HTML na área de entrada e o JSX equivalente aparece no painel de saída, atualizado enquanto você digita com um pequeno debounce.
Quais atributos são renomeados?
class vira className, for vira htmlFor, tabindex vira tabIndex, e outros atributos com hífen como maxlength, colspan ou stroke-width são convertidos para o nome camelCase do React. Atributos data-* e aria-* permanecem intactos.
Como o atributo style é convertido?
Uma string CSS como style="background-color: red; font-size: 12px" vira um objeto JavaScript: style={{backgroundColor:'red', fontSize:'12px'}}, com cada propriedade CSS em camelCase e o valor entre aspas.
Como os elementos vazios são tratados?
Elementos que não podem ter filhos — img, br, input, hr, meta, link e outros — são normalizados para sintaxe autoclosed: <img> vira <img />, exatamente como o JSX exige. Divs e spans vazios também são fechados assim.
O que acontece com comentários HTML?
Eles viram comentários JSX: <!-- nota --> torna-se {/* nota */}. Qualquer sequência que encerraria o comentário cedo é neutralizada para que o código gerado sempre compile.
Como entidades e caracteres especiais são tratados?
Entidades como & ou © são decodificadas para caracteres reais e depois chaves e sinais de menor/maior são re-escapados em forma segura para JSX, assim textos com { } ou < renderizam sem quebrar o componente.
Para que serve a opção de componente de função?
Ela embrulha a marcação convertida num modelo pronto: function Component() { return ( ...seu JSX... ) } em vez de JSX solto. Ative quando quiser colar o trecho direto num arquivo React.
Meu HTML é enviado para algum servidor?
Não. O parsing roda inteiramente no seu navegador com o DOMParser integrado. Nada é enviado a servidores, então dá para converter marcação privada e a ferramenta também funciona offline.
Como usar Conversor de HTML para JSX
Converta HTML comum em JSX do React pronto para uso sem sair do navegador. Tudo é analisado localmente com o DOMParser embutido — sua marcação nunca é enviada.
- Cole seu HTML no editor à esquerda; o resultado JSX aparece à direita e se atualiza enquanto você digita (debounce de 300 ms).
- Escolha a largura do recuo em "Recuo" — 2 ou 4 espaços por nível de aninhamento.
- Ative "Componente de função" para envolver a saída em function Component() { return ( ... ) }, pronta para colar num arquivo React.
- Use Copiar para levar o resultado, Exemplo para carregar uma amostra, ou Limpar para começar de novo.
class, for e tabindex viram className, htmlFor e tabIndex, strings de style viram objetos em camelCase, e elementos vazios como img ou br são emitidos auto-fechados — exatamente o que o JSX espera.
Ferramentas relacionadas
- Embelezador HTML Formate e embeleze código HTML instantaneamente. Converta HTML minificado em código limpo e legível. Ferramenta online gratuita, sem cadastro.
- Código para Imagem Converta trechos de código em imagens compartilháveis com destaque de sintaxe, temas personalizados e decorações de janela. 100% privacidade, tudo no seu navegador.
- Verificador de Hash Calcule e verifique hashes MD5, SHA-1, SHA-256, SHA-512 localmente
- Calculadora Chmod Calculadora chmod online gratuita para visualizar e calcular permissões de arquivo Linux com caixas de seleção. Converta instantaneamente entre notação numérica (755, 644) e simbólica (rwxr-xr-x). Suporta permissões especiais como setuid, setgid, sticky bit.
- Tabela ASCII Referência completa de codificação de caracteres ASCII com códigos decimais, hexadecimais, octais, binários, entidades HTML e descrições. Pesquisa e filtro instantâneos.
- Visualizador Hexadecimal Visualize o conteúdo de arquivos em formato hexadecimal com busca, navegação por deslocamento e rolagem virtual
- Consulta de Tipos MIME Encontre tipos MIME por extensão de arquivo ou busque extensões por tipo MIME. Referência online gratuita com mais de 1000 entradas.
- Verificador de resolução de tela Detecta resolução de tela, tamanho do viewport, DPI e profundidade de cor em tempo real.