Softonic

Conversor de HTML para JSX

Etapa 1 / 2

Converte: class para className, for para htmlFor, estilos inline para objetos JSX, fecha automaticamente tags vazias, remove comentários HTML.

Converter para JSX

JSX se parece com HTML até que deixa de ser: class vira className, for vira htmlFor, style é um objeto e não uma string, e toda tag vazia precisa se autofechar. Cole o HTML e este conversor produz JSX que compila de primeira, para você levar uma página de marketing para um componente React sem passar os próximos dez minutos caçando erros do compilador.

Como converter HTML em JSX

  1. 1

    Cole o HTML

    A marcação de um componente, ou um fragmento de página completo.

  2. 2

    Converta

    A ferramenta renomeia atributos como `class`, `for` e `readonly` para a grafia JSX e transforma estilos inline em objetos.

  3. 3

    Revise o JSX

    A saída está pronta para colar em um arquivo `.jsx` ou `.tsx`.

  4. 4

    Copie e cole

    O código usa expressões de linha única, então se encaixa bem dentro de um componente existente.

Cada diferença de HTML para JSX que importa

JSX não é HTML. É uma expressão JavaScript que compila em chamadas React.createElement(), então os nomes de atributos seguem as convenções do JavaScript.

O conversor aplica automaticamente as renomeações mais comuns. A lista completa abaixo é a referência de que você precisa ao escrever JSX manualmente.

Renomeações de atributos

HTML JSX Observações
class className class é reservado em JS
for htmlFor for é reservado
tabindex tabIndex camelCase
readonly readOnly camelCase
contenteditable contentEditable camelCase
stroke-width (SVG) strokeWidth camelCase
xlink:href xlinkHref Namespaces com dois-pontos achatados
aria-label aria-label ARIA mantém os hífens
data-* data-* Atributos de dados mantêm os hífens

Atributo style

HTML: style="color: red; padding: 10px"

JSX: style={{ color: 'red', padding: 10 }}

Valores numéricos sem unidades viram pixels; mantenha strings para porcentagens e valores sem unidade como flex.

Elementos vazios autofechados

O HTML tolera <br> e <input> sem tag de fechamento. O JSX exige <br /> e <input />, todo elemento precisa ser fechado explicitamente.

Comentários

Comentários HTML (<!-- -->) não são válidos em corpos JSX. Este conversor os remove; se precisar manter uma nota, escreva você mesmo como {/* Comentário de bloco JavaScript */}.

Atributos booleanos

HTML: <input checked> (ou <input checked="checked">)

JSX: <input checked={true} /> ou simplesmente <input checked />. Nunca passe a string “true”.

Saídas de emergência

  • Fragmentos HTML não confiáveis podem ser renderizados com dangerouslySetInnerHTML={{ __html: ... }}, propositalmente feio para desencorajar o uso.
  • Atributos data-* personalizados permanecem como estão; atributos não padrão são repassados, mas podem disparar avisos do React no modo de desenvolvimento.

Perguntas frequentes

Atributos SVG como stroke-width precisam ser escritos em camelCase (strokeWidth) no JSX, e cada tag deve se autofechar. O conversor autofecha tags vazias dentro do SVG e converte para camelCase os nomes de propriedades em strings de estilo, mas não renomeia atributos SVG; troque stroke-width por strokeWidth manualmente. Para ícones avulsos, a abordagem mais limpa é salvar o ícone como arquivo SVG e importá-lo como componente via svgr.

Sim, tanto JSX quanto TSX usam className. A única exceção é dentro de dangerouslySetInnerHTML, onde a string HTML bruta mantém class porque é inserida como está no DOM.

Não. A saída é apenas o fragmento JSX, sem wrapper export default function nem anotações de tipo. Cole-o no seu arquivo .jsx ou .tsx e adicione props, tipos e o wrapper você mesmo. class continua sendo convertido em className, que é exatamente o que o TSX espera.

Eles passam sem alteração. O conversor não renomeia manipuladores de eventos, então troque onclick por onClick e substitua a string por uma função real, por exemplo onClick={() => doThing()}. Você precisará definir doThing no escopo do seu componente.

Ferramentas relacionadas

Referência da Tabela ASCII

Tabela ASCII completa de 0 a 127 com valores decimais, hexadecimais, octais e binários e notação de referência numérica HTML, incluindo NUL, LF e DEL.

Referência de Caracteres HTML

Lista pesquisável de entidades HTML, seus códigos nomeados e numéricos, e uma cópia com um clique para caracteres e símbolos especiais.

Referência de atalhos de teclado

Pesquise atalhos padrão documentados do VS Code, Chrome e Bash com GNU Readline no macOS, Windows e Linux.

Gerador de EditorConfig

Gere um arquivo .editorconfig com suas regras de estilo e tamanho de indentação, fim de linha, charset e espaços em branco para formatação consistente entre IDEs e editores.

Validador de Email

Valide um endereço de email: verificação de sintaxe RFC 5322, consulta de registro MX em tempo real, além de detalhes de parte local, domínio e comprimento. Nenhum email é enviado.

Formatador de HTML

Formate HTML localmente no navegador com indentação de dois ou quatro espaços. O HTML não é enviado nem validado.

Ferramenta disponível em outros idiomas