¿Qué atributos HTML se renombran a JSX?

class pasa a className y for pasa a htmlFor. Muchos atributos en minúsculas reciben camelCase —tabindex a tabIndex, colspan a colSpan, maxlength a maxLength, readonly a readOnly—, mientras que los atributos data-* y aria-* se mantienen exactamente como están escritos.

¿Cómo convierte un atributo style en línea?

Una cadena style="color: red; font-size: 12px" se analiza y se convierte en un objeto de estilo de React, style={{ color: 'red', fontSize: '12px' }}, con cada propiedad CSS en camelCase. Las propiedades CSS personalizadas como --brand y los prefijos de proveedor se conservan.

¿Autocierra los elementos vacíos como e ?

Sí. Los elementos vacíos de HTML —br, img, input, hr, meta, link, source y los demás— se generan autocerrados ( , ) para que el JSX sea válido. Los elementos no vacíos que están vacíos también se autocierran.

¿Qué pasa con los comentarios HTML durante la conversión?

Los comentarios HTML se reescriben con la sintaxis de comentarios JSX. Si el texto del comentario contiene una secuencia de asterisco y barra, se divide para que no pueda cerrar el comentario JSX antes de tiempo y romper tu compilación.

¿Puede envolver la salida en un componente de React?

Activa «Envolver en componente» y ponle un nombre. La herramienta genera una función exportada que devuelve tu JSX, envolviendo varios elementos de nivel superior en un fragmento para que haya un único elemento raíz.

¿Convertirá onclick y otros manejadores de eventos en línea?

Los atributos de evento en línea reciben camelCase —onclick a onClick, onchange a onChange—, pero el valor sigue siendo una cadena. Todavía tendrás que cambiar la cadena por una función manejadora real en tu componente.

Conversor de HTML a JSX

Convierte HTML en JSX de React válido en tu navegador: class pasa a className, las etiquetas vacías se autocierran y los estilos en línea se convierten en objetos de estilo. Tu marcado se queda en tu dispositivo.

El Conversor de HTML a JSX funciona por completo en tu navegador. El marcado que pegas se analiza y se transforma en tu dispositivo y nunca se sube a ArrayKit.

Abre el Formateador de HTML

Acerca de Conversor de HTML a JSX

El Conversor de HTML a JSX convierte un bloque de HTML en JSX que puedes poner directamente en un componente de React. Renombra los atributos en los que React insiste —class pasa a className y for pasa a htmlFor—, aplica camelCase al resto (tabindex → tabIndex, colspan → colSpan) y autocierra los elementos vacíos como br, img e input para que el marcado sea válido. Las cadenas de estilo en línea style="color:red" se analizan y se convierten en objetos style={{ color: 'red' }} con las propiedades en camelCase, y los comentarios HTML pasan a ser comentarios JSX. Activa la opción de componente para envolverlo todo en una función exportada. Está pensado para desarrolladores que migran un diseño, una plantilla de correo o una página estática a React. Cada conversión funciona en tu navegador: el marcado que pegas nunca sale de tu dispositivo.

Características

Renombra class a className y for a htmlFor automáticamente
Autocierra los elementos vacíos como br, img, input y hr
Convierte las cadenas de estilo en línea en objetos de estilo con camelCase
Aplica camelCase a los atributos conocidos: tabindex a tabIndex, colspan a colSpan
Reescribe los comentarios HTML con la sintaxis de comentarios JSX
Mantiene intactos los atributos data-* y aria-* y las props booleanas
Opcionalmente envuelve el resultado en un componente de función de React exportado
Copia el JSX o descárgalo como un archivo .jsx, todo en tu navegador

Cómo usar Conversor de HTML a JSX

Pega tu HTML en el cuadro de entrada de la izquierda
Lee el JSX convertido en el panel de salida de la derecha
Activa «Envolver en componente» y ponle nombre para obtener un componente listo para usar
Copia el JSX o descárgalo como un archivo .jsx

Ejemplo

Entrada

<label for="name" class="lbl" tabindex="0">Name</label>
<input type="text" required>

Salida

<label htmlFor="name" className="lbl" tabIndex="0">Name</label>
<input type="text" required />

for pasa a htmlFor, class pasa a className, tabindex pasa a tabIndex y el <input> vacío se autocierra.

Errores comunes y solución de problemas

React advierte de que «class» es una propiedad o atributo del DOM no válido. — Pasa el HTML por el conversor: renombra cada class a className (y for a htmlFor) para que la advertencia desaparezca.
El JSX no compila con «Expected corresponding closing tag» en <img> o <br>. — Los elementos vacíos deben autocerrarse en JSX. El conversor genera <img … /> y <br /> para que las etiquetas se analicen sin problemas.
El atributo style da error con «style prop expects a mapping, not a string». — Los estilos de React son objetos, no cadenas. Pega el HTML y la herramienta convierte style="color:red" en style={{ color: 'red' }}.
Una llave literal o un < sin escapar en el texto rompe el JSX. — El conversor escapa { } y < > dentro de los nodos de texto (como { y <), así que esos caracteres se muestran como texto en lugar de interpretarse como JSX.

Preguntas frecuentes

¿Qué atributos HTML se renombran a JSX?: class pasa a className y for pasa a htmlFor. Muchos atributos en minúsculas reciben camelCase —tabindex a tabIndex, colspan a colSpan, maxlength a maxLength, readonly a readOnly—, mientras que los atributos data-* y aria-* se mantienen exactamente como están escritos.
¿Cómo convierte un atributo style en línea?: Una cadena style="color: red; font-size: 12px" se analiza y se convierte en un objeto de estilo de React, style={{ color: 'red', fontSize: '12px' }}, con cada propiedad CSS en camelCase. Las propiedades CSS personalizadas como --brand y los prefijos de proveedor se conservan.
¿Autocierra los elementos vacíos como <br> e <img>?: Sí. Los elementos vacíos de HTML —br, img, input, hr, meta, link, source y los demás— se generan autocerrados (<br />, <img … />) para que el JSX sea válido. Los elementos no vacíos que están vacíos también se autocierran.
¿Qué pasa con los comentarios HTML durante la conversión?: Los comentarios HTML se reescriben con la sintaxis de comentarios JSX. Si el texto del comentario contiene una secuencia de asterisco y barra, se divide para que no pueda cerrar el comentario JSX antes de tiempo y romper tu compilación.
¿Puede envolver la salida en un componente de React?: Activa «Envolver en componente» y ponle un nombre. La herramienta genera una función exportada que devuelve tu JSX, envolviendo varios elementos de nivel superior en un fragmento para que haya un único elemento raíz.
¿Convertirá onclick y otros manejadores de eventos en línea?: Los atributos de evento en línea reciben camelCase —onclick a onClick, onchange a onChange—, pero el valor sigue siendo una cadena. Todavía tendrás que cambiar la cadena por una función manejadora real en tu componente.

Herramientas relacionadas

Formateador de HTML — Embellece o minifica HTML, formatea CSS/JS en línea y previsualiza el resultado.
HTML a Markdown — Convierte HTML en Markdown limpio con tablas GFM y enlaces.
Escapar / Desescapar HTML — Escapa y desescapa caracteres especiales y entidades HTML.
Generador de JSON-LD — Crea datos estructurados válidos de schema.org listos para pegar.
Formateador de CSS / SCSS — Embellece o minifica CSS/SCSS/LESS, ordena propiedades y quita duplicados.
Generador de Tablas Markdown — Crea tablas en una cuadrícula editable y exporta GFM, HTML, AsciiDoc o LaTeX.