UTILS.
100% no navegador

HTML para JSX / React

Converta um trecho HTML em JSX válido para React — renomeando atributos, autofechando tags void e transformando estilos inline em objetos de estilo.

— a saída aparece aqui —

Sobre esta ferramenta

O conversor HTML para JSX / React analisa um trecho HTML com o DOMParser nativo do navegador e o re-serializa como JSX válido, corrigindo tudo que o React precisa. Ele roda totalmente no lado do cliente, então a marcação que você cola permanece na sua máquina. Cole qualquer HTML — uma exportação de design, um template de e-mail, um esboço de componente — e obtenha JSX que você pode colocar direto em um arquivo React.

A reescrita renomeia atributos reservados (class vira className, for vira htmlFor), converte o resto para camelCase — tabindex para tabIndex, maxlength para maxLength, stroke-width para strokeWidth — enquanto deixa atributos data-* e aria-* intocados. Elementos void como img, br, input e hr são autofechados (<img />), comentários HTML viram {/* ... */}, chaves literais no texto são escapadas como {'{'}, e uma string style="a:b;c:d" inline é convertida em um objeto style={{ a: 'b', c: 'd' }} com chaves CSS em camelCase. Atributos booleanos como disabled podem ser emitidos nus ou como ={true} com um alternador.

Escolha saída de fragmento — múltiplos nós raiz são automaticamente envolvidos em um fragmento <>...</> — ou saída de componente completo, que envolve o JSX em uma export default function com o nome e a indentação que você escolher (2 espaços, 4 espaços ou tabs). O resultado está pronto para colar; como a análise usa um DOM real, aninhamentos malformados são normalizados do mesmo jeito que um navegador faria.

Perguntas frequentes

Quais atributos são renomeados?
class vira className e for vira htmlFor; outros atributos hifenizados ou reservados são convertidos para camelCase (tabindex para tabIndex, maxlength para maxLength, stroke-width para strokeWidth). Atributos data-* e aria-* são preservados exatamente como escritos.
Como os estilos inline são tratados?
Uma string style="color:red;font-size:14px" vira style={{ color: 'red', fontSize: '14px' }} — cada propriedade CSS é convertida para camelCase e todo valor é emitido como uma string, o que é sempre válido para estilos inline do React.
O que acontece com múltiplos elementos raiz?
JSX precisa de uma única raiz, então quando seu trecho tem vários nós de nível superior eles são envolvidos em um Fragment (<>...</>). O modo de componente completo em vez disso os envolve dentro de uma expressão parentetizada retornada.
Ele converte comentários e tags void?
Sim. Comentários HTML viram comentários JSX {/* ... */}, e elementos void (img, br, input, hr, meta, link e o resto) são renderizados autofechados como <img />, o que o JSX exige.

Mais ferramentas