Quali attributi vengono rinominati?

class in className, for in htmlFor, tabindex in tabIndex, readonly in readOnly, colspan in colSpan, oltre al camelCase per tutte le proprietà DOM standard e gli handler on*.

Come è convertita la stringa style?

Viene divisa sui punti e virgola, ogni proprietà CSS è camelCased e il risultato esce come oggetto JSX a doppie graffe. Prefissi vendor e proprietà personalizzate vengono preservati.

data-* e aria-* cambiano?

No. JSX accetta entrambi in kebab, il convertitore non li tocca. Solo gli attributi DOM standard vengono rinominati.

I commenti HTML vengono convertiti?

Sì. diventa {/* commento */} così l’intento è preservato senza rompere il parser.

E gli script e gli handler inline?

Il convertitore rinomina onclick in onClick e gli altri handler, ma il corpo della funzione resta come stringa. Di solito lo riscrivi come callback React vero prima del rilascio.

Il mio HTML viene inviato da qualche parte?

No. La trasformazione resta in questa scheda del browser. Toova non vede cosa incolli — niente analytics, niente log, nulla.

HTML a JSX — class, for, style, handler

Convertitore HTML → JSX

Privacy by design — tutto gira nel tuo browser

Incolla HTML a sinistra, copia JSX pronto per React a destra. Il convertitore riscrive class in className, for in htmlFor, le stringhe style inline in oggetti camelCase e auto-chiude i void element come img e input perché JSX possa interpretarli.

Rimappatura di attributi ed eventi

React riusa i nomi delle proprietà DOM al posto degli attributi HTML: tabindex diventa tabIndex, readonly diventa readOnly, colspan diventa colSpan. Gli handler inline passano da onclick a onClick, da onmouseover a onMouseOver, e così per ogni handler standard. I due rinomini specifici di HTML sono class in className e for in htmlFor, perché entrambi sono parole riservate in JavaScript.

Stringhe style in oggetti camelCase

JSX richiede gli stili inline come oggetto letterale con ogni proprietà CSS in camelCase. Una stringa come padding: 1rem; background-color: #fff diventa style={{ padding: '1rem', backgroundColor: '#fff' }}. Il convertitore gestisce kebab-case verso camelCase, prefissi vendor (-webkit-, -moz-, -ms-) e proprietà CSS personalizzate (--brand-color rimane tale, con chiave virgolettata se serve).

Privacy e casi limite

La trasformazione gira in una singola funzione JavaScript di questa scheda. Il tuo HTML non lascia il browser — importante quando porti markup con dati di clienti. I 14 void element (img, input, br, hr, meta, link, area, base, col, embed, source, track, wbr, param) escono self-closing perché JSX li accetti. Gli attributi data- e aria- restano intatti perché già validi in JSX.

Domande frequenti

Quali attributi vengono rinominati?: class in className, for in htmlFor, tabindex in tabIndex, readonly in readOnly, colspan in colSpan, oltre al camelCase per tutte le proprietà DOM standard e gli handler on*.
Come è convertita la stringa style?: Viene divisa sui punti e virgola, ogni proprietà CSS è camelCased e il risultato esce come oggetto JSX a doppie graffe. Prefissi vendor e proprietà personalizzate vengono preservati.
data-* e aria-* cambiano?: No. JSX accetta entrambi in kebab, il convertitore non li tocca. Solo gli attributi DOM standard vengono rinominati.
I commenti HTML vengono convertiti?: Sì.  diventa {/* commento */} così l’intento è preservato senza rompere il parser.
E gli script e gli handler inline?: Il convertitore rinomina onclick in onClick e gli altri handler, ma il corpo della funzione resta come stringa. Di solito lo riscrivi come callback React vero prima del rilascio.
Il mio HTML viene inviato da qualche parte?: No. La trasformazione resta in questa scheda del browser. Toova non vede cosa incolli — niente analytics, niente log, nulla.