Como usar: Conversor HTML para JSX
- Cole seu HTML ou SVG.
- Veja o JSX sendo convertido em tempo real — atributos, estilos e comentários são reescritos para o React.
- Se quiser, envolva em um componente com nome e copie para o seu projeto.
O que muda do HTML para o JSX
classviraclassNameeforvirahtmlFor.- Estilos inline viram objetos:
style="font-size: 14px"→style={{ fontSize: '14px' }}. - Elementos void são autofechados:
<img>→<img />,<br>→<br />. - Event handlers e outros atributos usam camelCase:
onclick→onClick,tabindex→tabIndex. - Atributos SVG ficam em camelCase:
stroke-width→strokeWidth,xlink:href→xlinkHref. - Comentários HTML viram
{/* … */}, e as chaves no texto são escapadas.
Event handlers
Handlers inline como onclick="doThing()" são strings no HTML, mas funções no React. Por isso, são convertidos em um placeholder marcado com comentário, que você pode trocar por uma referência de função real.
Vários elementos raiz
Um componente precisa retornar um único elemento. Quando o HTML tem vários elementos no nível superior, o conversor os envolve em um fragment <>…</>.
Privado por design
A conversão roda inteiramente no seu navegador — seu código nunca é enviado, então é seguro para projetos proprietários.
Também pesquisado como: html para jsx, converter html para jsx, html para react, svg para jsx, class para classname, html para componente react.
Ferramentas que combinam com: Conversor HTML para JSX
- Conversor de SVG para JSX — Cole um SVG do Figma, do Illustrator ou de um conjunto de ícones e receba um componente React (JSX ou TSX) pronto para usar, com uma prévia segura do ícone.
- Formatador HTML — Cole HTML minificado ou bagunçado e receba um código limpo e com indentação consistente, incluindo os blocos <style> e <script> embutidos.
- Conversor CSS para Tailwind — Cole regras ou declarações CSS e receba as classes utilitárias do Tailwind equivalentes para cada seletor — incluindo estados hover: e valores arbitrários como p-[13px].
- HTML e CSS para Webflow — Cole o HTML e o CSS, clique em Copy to Webflow e cole no Designer — você recebe Div Blocks, Headings, Links, Imagens e Listas reais, com classes, combo classes, breakpoints para tablet e mobile e estados hover, em vez de um grande Code Embed.
Perguntas frequentes
Por que o React usa className em vez de class?
“class” é uma palavra reservada em JavaScript, e o JSX compila para JavaScript, então o React usa o nome da propriedade do DOM, className.
Dá para converter ícones SVG em componentes React?
Sim. Cole o SVG — atributos como stroke-width e fill-rule são convertidos para camelCase. Para um fluxo dedicado a SVG com props, use SVG para JSX.
O que acontece com handlers onclick inline?
Eles viram onClick com um placeholder e um comentário, porque o React espera uma função e não uma string de código.
Posso instalar o Conversor HTML para JSX como um aplicativo da web e usá-lo offline?
Sim. O Conversor HTML para JSX é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.