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

Gerador de Cartão CSS

Crie o CSS de um contêiner de cartão: fundo, borda, raio dos cantos, espaçamento interno e sombra suave, com pré-visualização imediata e código para copiar e colar.

Conversor de Tamanho de Arquivo

Converta entre bytes, KB, MB, GB, TB e as unidades binárias IEC (KiB, MiB, GiB, TiB), combinando decimal e binário como preferir.

Gerador de Docker Compose

Gere um docker-compose.yml a partir de definições de serviços com imagem, portas e volumes, com padrões de boas práticas.

Conversor de base numérica

Converta números entre binário, octal, decimal, hexadecimal e qualquer base personalizada de 2 a 36, com o detalhamento posicional.

Gerador de README

Gere um README.md estruturado a partir de alguns campos: nome do projeto, tagline, recursos, comando de instalação, trecho de início rápido, autor e licença. Cole direto no seu repositório.

Visualizador de Markdown

Escreva Markdown e veja a renderização HTML atualizar ao vivo. Sintaxe com estilo GitHub, incluindo tabelas, listas de tarefas, blocos de código cercados e autolinks.

Ferramenta disponível em outros idiomas