Convertidor de HTML a JSX | Pega HTML y obtén JSX listo para React

Pegar HTML plano dentro de un componente de React rompe la compilación: class y for son palabras reservadas, los estilos en línea son cadenas en lugar de objetos y las etiquetas vacías no se cierran solas. Este convertidor reescribe todo eso en un solo paso para que puedas llevar tu marcado a JSX sin corregir cada error a mano.

💡 Sobre esta herramienta

Quien migra una landing estática, un fragmento exportado de una herramienta de diseño o una plantilla antigua a React choca con el mismo muro. JSX se parece a HTML pero se compila a JavaScript, así que los nombres de atributo que JavaScript ya usa deben cambiar: class pasa a className y for a htmlFor. Los atributos de evento como onclick deben escribirse en camelCase (onClick), el estilo en línea style="color: red" tiene que convertirse en la forma de objeto style={{color: 'red'}} y elementos como <img> o <br> necesitan un /> explícito o el analizador de React falla.

Esta herramienta aplica cinco transformaciones a lo que pegues: renombra los atributos reservados, convierte los manejadores de evento a camelCase, transforma las cadenas de estilo en objetos, autocierra las etiquetas vacías y reescribe los comentarios <!-- --> a la sintaxis JSX {/* */}. Copia la salida y pégala directamente en tu componente.

🧐 Preguntas Frecuentes

¿Qué atributos además de class se convierten? for a htmlFor, tabindex a tabIndex, maxlength a maxLength, colspan a colSpan, readonly a readOnly y los demás atributos camelCase que React espera.

¿Cómo se manejan los estilos en línea? Una cadena como style="color: red; line-height: 1.5" pasa a style={{color: 'red', lineHeight: 1.5}}: las propiedades CSS con guion se camelCasean, los números puros quedan sin comillas y el resto se envuelve como cadena (un valor con unidad como 14px se convierte en la cadena '14px').

¿Cierra etiquetas vacías como <input> e <img>? Sí. Detecta los elementos vacíos de HTML (img, br, input, hr, meta, link, entre otros) y añade />.

¿React se quejará si hay varios elementos raíz? Esta herramienta solo transforma la sintaxis. Si tu fragmento devuelve varios elementos hermanos, envuélvelos en un fragmento (<>...</>) después de pegar; ese ajuste corre por tu cuenta.

¿Qué pasa con los comentarios? <!-- nota --> se reescribe a la forma JSX válida {/* nota */}.

📚 Por qué JSX no puede ser HTML sin más

JSX se parece engañosamente a HTML, pero es azúcar sintáctico sobre llamadas a funciones de JavaScript. Un empaquetador como Babel compila cada elemento en una llamada a React.createElement durante la construcción, por eso el navegador nunca ve JSX directamente. class queda fuera de juego porque JavaScript la reserva para declarar clases, y for choca con el bucle for. Existen decenas de estos atributos renombrados, y omitir uno solo genera una advertencia confusa en lugar de un error claro, así que automatizar las sustituciones mecánicas elimina una fuente habitual de fricción durante la migración.