Conversor de HTML a JSX gratis

El conversor de HTML a JSX es una herramienta en línea gratuita que transforma el marcado HTML en sintaxis JSX válida para usar en componentes de React.

Sí, es completamente gratis y no requiere registro. Toda la conversión se realiza del lado del cliente, en tu navegador.

El conversor de HTML a JSX cambia class por className, convierte los estilos en línea en objetos, autocierra los elementos vacíos y maneja otras diferencias entre HTML y JSX.

Por supuesto. El HTML to JSX Converter procesa todo del lado del cliente, en tu navegador. No se sube ni se almacena ningún dato en ningún servidor. Tu contenido permanece siempre privado en tu dispositivo.

Sí, el HTML to JSX Converter es totalmente adaptable y funciona en smartphones y tabletas. Puedes usarlo en cualquier dispositivo con un navegador web moderno, sin necesidad de descargar ninguna app.

No se necesita ninguna cuenta ni registro. Solo abre el HTML to JSX Converter en tu navegador y empieza a usarlo de inmediato. No hay registros obligatorios ni restricciones de uso.

Simplemente introduce tu contenido en el campo indicado, ajusta las opciones a tu gusto y la herramienta lo procesará al instante. Después puedes copiar el resultado al portapapeles o descargarlo.

El HTML to JSX Converter funciona en todos los navegadores modernos, incluidos Chrome, Firefox, Safari, Edge y Opera. Para una mejor experiencia, usa la última versión de tu navegador preferido.

JSX se parece casi por completo al HTML, pero en realidad es sintaxis de JavaScript que se compila en elementos de React, por lo que sigue las reglas de JavaScript en lugar de las del navegador. Las diferencias prácticas son justo donde se rompe el marcado copiado: el atributo "class" de HTML se convierte en "className" y "for" se convierte en "htmlFor", porque ambas palabras están reservadas en JavaScript. Los atributos de varias palabras como "tabindex" y "maxlength" se convierten a camelCase como "tabIndex" y "maxLength", las cadenas "style" en línea se transforman en objetos de JavaScript, y las etiquetas vacías como "<img>" y "<br>" deben cerrarse explícitamente. JSX también espera un único elemento raíz, así que las etiquetas hermanas necesitan un contenedor o un Fragment. Estos cambios mecánicos son fáciles de pasar por alto al hacerlos a mano en un archivo extenso. Pega tu HTML arriba y el conversor aplica todas estas reglas al instante, de modo que el resultado se pueda usar directamente en un componente de React.

React muestra esa advertencia porque "class" es una palabra reservada en JavaScript, y JSX se compila a JavaScript en lugar de a HTML puro. Para evitar el conflicto con el lenguaje, React renombra el atributo a "className", que luego mapea de nuevo al atributo real "class" en el DOM al renderizar. La misma lógica se aplica a "for" en los elementos label, que se convierte en "htmlFor". Si pegas HTML directamente en un componente sin renombrar estos atributos, React muestra una advertencia en la consola o no aplica tus estilos, ya que ignora la prop "class" no reconocida. Corregir cada instancia manualmente en una plantilla larga es tedioso y fácil de hacer mal. Este conversor renombra "class" a "className" y "for" a "htmlFor" automáticamente, así que pega tu marcado arriba y las advertencias desaparecen.

En HTML, los estilos en línea son una sola cadena como style="margin-top: 10px; font-size: 14px". JSX, en cambio, espera un objeto de JavaScript cuyas claves sean propiedades CSS en camelCase y cuyos valores sean cadenas, envuelto en dobles llaves: style={{ marginTop: '10px', fontSize: '14px' }}. Las llaves exteriores indican a JSX que estás pasando una expresión de JavaScript, y las llaves interiores son el objeto en sí. Los nombres de propiedades con guiones se convierten a camelCase, así que "margin-top" se transforma en "marginTop" y "background-color" en "backgroundColor". Convertir esto a mano es propenso a errores, sobre todo con muchas declaraciones o prefijos de proveedor. Esta herramienta analiza cada estilo en línea y lo reescribe automáticamente como un objeto JSX correcto, convirtiendo las propiedades a camelCase y entrecomillando los valores por ti. Pega arriba un marcado que contenga atributos style y revisa el panel de resultado para ver los objetos convertidos.

El marcado SVG copiado desde herramientas de diseño o bancos de iconos usa nombres de atributos con guiones como fill-rule, stroke-width y clip-path, válidos en HTML pero inválidos como props de JSX. Como JSX es JavaScript, un guion se interpreta como un signo menos, así que React rechaza estos atributos hasta que se convierten a camelCase como fillRule, strokeWidth y clipPath. Lo mismo ocurre con muchos atributos de filtros y gradientes dentro de SVG complejos. Si se te escapa aunque sea uno, normalmente rompe la compilación o hace que el icono se muestre en blanco, y los iconos grandes pueden tener docenas de ellos. Este conversor reconoce los atributos SVG y los convierte a camelCase automáticamente, preservando la estructura y el viewBox, de modo que el icono se renderiza correctamente en cuanto lo pegas en un componente. Suelta tu SVG en la entrada de arriba y copia el marcado listo para React desde el resultado.

Sí. Además de traducir los atributos, el conversor puede darle forma al resultado como un componente listo para usar en lugar de dejar marcado suelto. Puedes generar un archivo .jsx sencillo o una versión .tsx en TypeScript, y envolver el resultado como un componente de función con nombre o una función flecha, con la instrucción de importación de React correspondiente generada por ti. Si tu fragmento tiene varios elementos de nivel superior, la envoltura en Fragment los devuelve como un único nodo para que el componente sea válido sin necesidad de un div adicional. También puedes definir el tamaño de sangría, elegir comillas simples o dobles, y extraer valores repetidos como props. El panel de resultado añade un diff línea por línea y una vista lado a lado para que puedas verificar cada cambio, y una pestaña de conversión masiva procesa varios fragmentos en una sola pasada. Configura tus opciones de salida arriba y luego copia o descarga el componente terminado.