Cómo usar: Convertidor HTML a JSX
- Pega tu marcado HTML o SVG.
- Revisa el JSX mientras se convierte: los atributos, estilos y comentarios se reescriben para React.
- Opcionalmente, envuélvelo en un componente con nombre y cópialo en tu proyecto.
Qué cambia de HTML a JSX
classpasa aclassNameyforpasa ahtmlFor.- Los estilos en línea se convierten en objetos:
style="font-size: 14px"→style={{ fontSize: '14px' }}. - Los elementos vacíos se autocierran:
<img>→<img />,<br>→<br />. - Los manejadores de eventos y otros atributos usan camelCase:
onclick→onClick,tabindex→tabIndex. - Los atributos SVG se escriben en camelCase:
stroke-width→strokeWidth,xlink:href→xlinkHref. - Los comentarios HTML se convierten en
{/* … */}, y las llaves en el texto se escapan.
Manejadores de eventos
Los manejadores en línea como onclick="doThing()" son cadenas en HTML pero funciones en React, así que se convierten en un marcador con comentario que puedes reemplazar por una referencia a una función real.
Varios elementos raíz
Un componente debe devolver un solo elemento. Cuando el HTML tiene varios elementos de primer nivel, el conversor los envuelve en un fragmento <>…</>.
Privado por diseño
La conversión se ejecuta por completo en tu navegador: tu código nunca se sube, así que es seguro para proyectos propietarios.
También se busca como: html a jsx, convertir html a jsx, html a react, svg a jsx, class a classname, html a componente react.
Herramientas que combinan con: Convertidor HTML a JSX
- Conversor SVG a JSX — Pega un SVG de Figma, Illustrator o de un set de iconos y obtén un componente React (JSX o TSX) listo para usar, con una vista previa segura del icono.
- Formateador HTML — Pega HTML minificado o desordenado y obtén HTML limpio y con sangría coherente, incluidos los bloques <style> y <script> incrustados.
- CSS a Tailwind — Pega reglas o declaraciones CSS y obtén las clases utilitarias de Tailwind equivalentes para cada selector, incluidos los estados hover: y los valores arbitrarios como p-[13px].
- HTML y CSS a Webflow — Pega el HTML y su CSS, haz clic en Copiar a Webflow y pega en el Designer: obtendrás Div Blocks, Headings, Links, Images y Lists reales, con clases, combo classes, breakpoints para tablet y móvil y estados hover, en lugar de un único Code Embed.
Preguntas frecuentes
¿Por qué React necesita className en lugar de class?
“class” es una palabra reservada en JavaScript, y JSX se compila a JavaScript, así que React usa el nombre de propiedad del DOM className.
¿Puedo convertir iconos SVG en componentes de React?
Sí. Pega el SVG: atributos como stroke-width y fill-rule se convierten a camelCase. Para un flujo dedicado a SVG con props, usa SVG a JSX.
¿Qué pasa con los manejadores onclick en línea?
Se convierten en onClick con un marcador y un comentario, porque React espera una función y no una cadena de código.
¿Puedo instalar Convertidor HTML a JSX como aplicación web y utilizarla sin conexión?
Sí. Convertidor HTML a JSX 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.