Como usar: HTML to JSX Converter
- Paste your HTML or SVG markup.
- Read the JSX as it converts — attributes, styles and comments are rewritten for React.
- Optionally wrap it in a named component, then copy it into your project.
What changes from HTML to JSX
classbecomesclassNameandforbecomeshtmlFor.- Inline styles become objects:
style="font-size: 14px"→style={{ fontSize: '14px' }}. - Void elements are self-closed:
<img>→<img />,<br>→<br />. - Event handlers and other attributes use camelCase:
onclick→onClick,tabindex→tabIndex. - SVG attributes are camelCased:
stroke-width→strokeWidth,xlink:href→xlinkHref. - HTML comments become
{/* … */}, and curly braces in text are escaped.
Event handlers
Inline handlers like onclick="doThing()" are strings in HTML but functions in React, so they are converted to a comment-marked placeholder you can replace with a real function reference.
Multiple root elements
A component must return one element. When the HTML has several top-level elements, the converter wraps them in a fragment <>…</>.
Private by design
The conversion runs entirely in your browser — your code is never uploaded, so it’s safe for proprietary projects.
Também pesquisado como: html to jsx, convert html to jsx, html to react, svg to jsx, class to classname, html to react component.
Ferramentas que combinam com: HTML to JSX Converter
- SVG to JSX Converter — Paste an SVG from Figma, Illustrator or an icon set and get a ready-to-use React (JSX or TSX) component — with a safe preview of the icon.
- HTML Formatter — Paste minified or messy markup and get clean, consistently indented HTML — including embedded <style> and <script> blocks.
- CSS to Tailwind Converter — Paste CSS rules or declarations and get the equivalent Tailwind utility classes for each selector — including hover: states and arbitrary values like p-[13px].
- HTML & CSS to Webflow — Paste HTML and its CSS, click Copy to Webflow and paste into the Designer — you get real Div Blocks, Headings, Links, Images and Lists with classes, combo classes, tablet/mobile breakpoints and hover states instead of one big Code Embed.
Perguntas frequentes
Why does React need className instead of class?
“class” is a reserved word in JavaScript, and JSX compiles to JavaScript, so React uses the DOM property name className.
Can I convert SVG icons to React components?
Yes. Paste the SVG — attributes like stroke-width and fill-rule are camelCased. For a dedicated SVG workflow with props, use SVG to JSX.
What happens to inline onclick handlers?
They become onClick with a placeholder and a comment, because React expects a function rather than a string of code.
Posso instalar o HTML to JSX Converter como um aplicativo da web e usá-lo offline?
Sim. O HTML to JSX Converter é 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.