Cómo 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.
También se busca como: html to jsx, convert html to jsx, html to react, svg to jsx, class to classname, html to react component.
Herramientas que combinan con: 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.
Preguntas frecuentes
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.
¿Puedo instalar HTML to JSX Converter como aplicación web y utilizarla sin conexión?
Sí. HTML to JSX Converter es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.