¿Qué atributos se renombran?

class a className, for a htmlFor, tabindex a tabIndex, readonly a readOnly, colspan a colSpan, además de camelCase para todas las propiedades estándar del DOM y handlers on*.

¿Cómo se convierte la string de style?

Se divide por punto y coma, cada propiedad CSS se camelCasea y se emite un objeto JSX entre llaves dobles. Los prefijos de vendor y propiedades personalizadas se conservan.

¿data-* y aria-* cambian?

No. JSX acepta ambos en kebab, así que el conversor no los toca. Solo los atributos DOM estándar se renombran.

¿Se convierten los comentarios HTML?

Sí. se vuelve {/* comentario */} para mantener la intención sin romper el parser.

¿Y los scripts y handlers inline?

El conversor renombra onclick a onClick y demás handlers, pero el cuerpo de la función queda como string. Lo normal es reescribirlo como callback de React antes de publicar.

¿Mi HTML se envía a algún sitio?

No. La transformación corre por completo en esta pestaña. Toova no ve qué pegaste — sin analytics, sin logs, nada.

HTML a JSX — class, for, style, handlers

Conversor HTML → JSX

Privacidad por diseño — se ejecuta completamente en tu navegador

Pega HTML a la izquierda y copia el JSX listo para React de la derecha. El conversor reescribe class a className, for a htmlFor, strings de style inline a objetos camelCase y autocierra void elements como img e input para que JSX pueda parsearlos.

Renombrado de atributos y eventos

React reusa los nombres de propiedad del DOM en vez de los atributos HTML: tabindex pasa a tabIndex, readonly a readOnly, colspan a colSpan. Los manejadores inline cambian de onclick a onClick, de onmouseover a onMouseOver y así con cada handler estándar. Los dos renombrados específicos de HTML son class a className y for a htmlFor, porque ambos son palabras reservadas en JavaScript.

Strings de style a objetos camelCase

JSX exige que los estilos inline sean un objeto literal con cada propiedad CSS en camelCase. Una cadena como padding: 1rem; background-color: #fff se vuelve style={{ padding: '1rem', backgroundColor: '#fff' }}. El conversor maneja kebab-case a camelCase, prefijos de vendor (-webkit-, -moz-, -ms-) y propiedades personalizadas de CSS (--brand-color queda tal cual, con clave entre comillas si hace falta).

Privacidad y casos límite

La transformación corre en una sola función JavaScript de esta pestaña. Tu HTML no sale del navegador — importante cuando portas marcado con datos de clientes. Los 14 void elements (img, input, br, hr, meta, link, area, base, col, embed, source, track, wbr, param) salen autocerrados para que JSX los acepte. Los atributos data- y aria- se conservan tal cual porque ya son JSX válido.

Preguntas frecuentes

¿Qué atributos se renombran?: class a className, for a htmlFor, tabindex a tabIndex, readonly a readOnly, colspan a colSpan, además de camelCase para todas las propiedades estándar del DOM y handlers on*.
¿Cómo se convierte la string de style?: Se divide por punto y coma, cada propiedad CSS se camelCasea y se emite un objeto JSX entre llaves dobles. Los prefijos de vendor y propiedades personalizadas se conservan.
¿data-* y aria-* cambian?: No. JSX acepta ambos en kebab, así que el conversor no los toca. Solo los atributos DOM estándar se renombran.
¿Se convierten los comentarios HTML?: Sí.  se vuelve {/* comentario */} para mantener la intención sin romper el parser.
¿Y los scripts y handlers inline?: El conversor renombra onclick a onClick y demás handlers, pero el cuerpo de la función queda como string. Lo normal es reescribirlo como callback de React antes de publicar.
¿Mi HTML se envía a algún sitio?: No. La transformación corre por completo en esta pestaña. Toova no ve qué pegaste — sin analytics, sin logs, nada.