Quais atributos HTML são renomeados para JSX?

class vira className e for vira htmlFor. Muitos atributos em minúsculas recebem camelCase — tabindex para tabIndex, colspan para colSpan, maxlength para maxLength, readonly para readOnly — enquanto atributos data-* e aria-* são mantidos exatamente como escritos.

Como ele converte um atributo de estilo inline?

Uma string style="color: red; font-size: 12px" é analisada em um objeto de estilo do React, style={{ color: 'red', fontSize: '12px' }}, com cada propriedade CSS em camelCase. Propriedades CSS personalizadas como --brand e prefixos de fornecedor são preservados.

Ele autofecha elementos vazios como e ?

Sim. Elementos vazios do HTML — br, img, input, hr, meta, link, source e os demais — são emitidos autofechados ( , ) para que o JSX seja válido. Elementos não vazios sem conteúdo também são autofechados.

O que acontece com os comentários HTML durante a conversão?

Comentários HTML são reescritos na sintaxe de comentário JSX. Se o texto do comentário contiver uma sequência de asterisco e barra, ela é quebrada para que não possa fechar o comentário JSX cedo demais e quebrar seu build.

Ele pode envolver a saída em um componente React?

Ative 'Envolver em componente' e dê um nome a ele. A ferramenta emite uma função exportada que retorna seu JSX, envolvendo múltiplos elementos de nível superior em um fragmento para que haja um único elemento raiz.

Ele vai converter onclick e outros manipuladores de evento inline?

Atributos de evento inline recebem camelCase — onclick para onClick, onchange para onChange — mas o valor continua sendo uma string. Você ainda precisará trocar a string por uma função manipuladora real no seu componente.

Conversor de HTML para JSX

Converta HTML em JSX válido para React no seu navegador — class vira className, tags vazias se autofecham e estilos inline viram objetos de estilo. Sua marcação fica no seu dispositivo.

O Conversor de HTML para JSX roda inteiramente no seu navegador. A marcação que você cola é analisada e transformada no seu dispositivo e nunca é enviada à ArrayKit.

Abrir o Formatador de HTML

Sobre Conversor de HTML para JSX

O Conversor de HTML para JSX transforma um bloco de HTML em JSX que você pode colocar direto em um componente React. Ele renomeia os atributos em que o React insiste — class vira className e for vira htmlFor — aplica camelCase no resto (tabindex → tabIndex, colspan → colSpan) e autofecha elementos vazios como br, img e input para que a marcação seja válida. Strings inline style="color:red" são analisadas em objetos style={{ color: 'red' }} com propriedades em camelCase, e comentários HTML viram comentários JSX. Ative a opção de componente para envolver tudo em uma função exportada. É feito para desenvolvedores que estão portando um design, um template de e-mail ou uma página estática para o React. Cada conversão roda no seu navegador — a marcação que você cola nunca sai do seu dispositivo.

Recursos

Renomeia class para className e for para htmlFor automaticamente
Autofecha elementos vazios como br, img, input e hr
Converte strings de estilo inline em objetos de estilo em camelCase
Aplica camelCase em atributos conhecidos: tabindex para tabIndex, colspan para colSpan
Reescreve comentários HTML na sintaxe de comentário JSX
Mantém atributos data-* e aria-* e props booleanas intactos
Opcionalmente envolve o resultado em um componente de função React exportado
Copie o JSX ou baixe-o como um arquivo .jsx, tudo no seu navegador

Como usar Conversor de HTML para JSX

Cole seu HTML na caixa de entrada à esquerda
Leia o JSX convertido no painel de saída à direita
Ative 'Envolver em componente' e dê um nome a ele para obter um componente pronto para usar
Copie o JSX ou baixe-o como um arquivo .jsx

Exemplo

Entrada

<label for="name" class="lbl" tabindex="0">Name</label>
<input type="text" required>

Saída

<label htmlFor="name" className="lbl" tabIndex="0">Name</label>
<input type="text" required />

for vira htmlFor, class vira className, tabindex vira tabIndex e o <input> vazio se autofecha.

Erros comuns e solução de problemas

O React avisa que 'class' é uma propriedade ou atributo DOM inválido. — Passe o HTML pelo conversor — ele renomeia todo class para className (e for para htmlFor) para que o aviso desapareça.
O JSX falha ao compilar com 'Expected corresponding closing tag' em <img> ou <br>. — Elementos vazios precisam ser autofechados em JSX. O conversor gera <img … /> e <br /> para que as tags sejam analisadas corretamente.
O atributo style dá erro com 'style prop expects a mapping, not a string'. — Estilos do React são objetos, não strings. Cole o HTML e a ferramenta transforma style="color:red" em style={{ color: 'red' }}.
Uma chave literal ou um < bruto no texto quebra o JSX. — O conversor escapa { } e < > dentro de nós de texto (como { e <), então esses caracteres são renderizados como texto em vez de lidos como JSX.

Perguntas frequentes

Quais atributos HTML são renomeados para JSX?: class vira className e for vira htmlFor. Muitos atributos em minúsculas recebem camelCase — tabindex para tabIndex, colspan para colSpan, maxlength para maxLength, readonly para readOnly — enquanto atributos data-* e aria-* são mantidos exatamente como escritos.
Como ele converte um atributo de estilo inline?: Uma string style="color: red; font-size: 12px" é analisada em um objeto de estilo do React, style={{ color: 'red', fontSize: '12px' }}, com cada propriedade CSS em camelCase. Propriedades CSS personalizadas como --brand e prefixos de fornecedor são preservados.
Ele autofecha elementos vazios como <br> e <img>?: Sim. Elementos vazios do HTML — br, img, input, hr, meta, link, source e os demais — são emitidos autofechados (<br />, <img … />) para que o JSX seja válido. Elementos não vazios sem conteúdo também são autofechados.
O que acontece com os comentários HTML durante a conversão?: Comentários HTML são reescritos na sintaxe de comentário JSX. Se o texto do comentário contiver uma sequência de asterisco e barra, ela é quebrada para que não possa fechar o comentário JSX cedo demais e quebrar seu build.
Ele pode envolver a saída em um componente React?: Ative 'Envolver em componente' e dê um nome a ele. A ferramenta emite uma função exportada que retorna seu JSX, envolvendo múltiplos elementos de nível superior em um fragmento para que haja um único elemento raiz.
Ele vai converter onclick e outros manipuladores de evento inline?: Atributos de evento inline recebem camelCase — onclick para onClick, onchange para onChange — mas o valor continua sendo uma string. Você ainda precisará trocar a string por uma função manipuladora real no seu componente.

Ferramentas relacionadas

Formatador de HTML — Embeleze ou minifique HTML, formate CSS/JS inline e veja a prévia do resultado.
HTML para Markdown — Converta HTML em Markdown limpo com tabelas GFM, listas e links.
Escapar / Desescapar HTML — Escape e desescape caracteres especiais e entidades HTML.
Gerador de JSON-LD — Crie dados estruturados schema.org válidos como uma script tag.
Formatador de CSS / SCSS — Embeleze ou minifique CSS/SCSS/LESS, ordene propriedades e remova duplicatas.
Gerador de Tabela Markdown — Monte tabelas Markdown numa grade editável e exporte vários formatos.