UTILS.
100% en el navegador

HTML a JSX / React

Convierte un fragmento HTML en JSX válido para React: renombrando atributos, autocerrando etiquetas vacías y convirtiendo estilos en línea en objetos de estilo.

— la salida aparece aquí —

Acerca de esta herramienta

El conversor HTML a JSX / React analiza un fragmento HTML con el DOMParser nativo del navegador y lo vuelve a serializar como JSX válido, corrigiendo todo lo que React necesita. Se ejecuta totalmente del lado del cliente, así que el marcado que pegas permanece en tu máquina. Pega cualquier HTML —una exportación de diseño, una plantilla de correo, un boceto de componente— y obtén JSX que puedes insertar directamente en un archivo React.

La reescritura renombra los atributos reservados (class pasa a className, for pasa a htmlFor), pasa el resto a camelCase —tabindex a tabIndex, maxlength a maxLength, stroke-width a strokeWidth— mientras deja intactos los atributos data-* y aria-*. Los elementos vacíos como img, br, input y hr se hacen autocerrados (<img />), los comentarios HTML pasan a {/* ... */}, las llaves literales en el texto se escapan como {'{'}, y una cadena style="a:b;c:d" en línea se convierte en un objeto style={{ a: 'b', c: 'd' }} con claves CSS en camelCase. Los atributos booleanos como disabled pueden emitirse escuetos o como ={true} con un interruptor.

Elige salida de fragmento —los múltiples nodos raíz se envuelven automáticamente en un fragmento <>...</>— o salida de componente completo, que envuelve el JSX en una export default function con tu nombre e indentación elegidos (2 espacios, 4 espacios o tabuladores). El resultado está listo para pegar; como el análisis usa un DOM real, el anidamiento mal formado se normaliza igual que lo haría un navegador.

Preguntas frecuentes

¿Qué atributos se renombran?
class pasa a className y for pasa a htmlFor; otros atributos con guion o reservados pasan a camelCase (tabindex a tabIndex, maxlength a maxLength, stroke-width a strokeWidth). Los atributos data-* y aria-* se preservan exactamente como se escribieron.
¿Cómo se manejan los estilos en línea?
Una cadena style="color:red;font-size:14px" pasa a style={{ color: 'red', fontSize: '14px' }}: cada propiedad CSS se pasa a camelCase y cada valor se emite como cadena, lo cual siempre es válido para estilos en línea de React.
¿Qué pasa con múltiples elementos raíz?
JSX necesita una sola raíz, así que cuando tu fragmento tiene varios nodos de nivel superior se envuelven en un Fragment (<>...</>). El modo de componente completo en su lugar los envuelve dentro de una expresión entre paréntesis retornada.
¿Convierte comentarios y etiquetas vacías?
Sí. Los comentarios HTML pasan a comentarios JSX {/* ... */}, y los elementos vacíos (img, br, input, hr, meta, link y el resto) se renderizan autocerrados como <img />, que es lo que JSX requiere.

Más herramientas