Quels attributs sont renommés ?

class en className, for en htmlFor, tabindex en tabIndex, readonly en readOnly, colspan en colSpan, plus le camelCase pour toutes les propriétés DOM standard et handlers on*.

Comment la chaîne style est-elle convertie ?

Elle est découpée aux points-virgules, chaque propriété CSS est mise en camelCase et un objet JSX à double accolade est émis. Préfixes vendeur et propriétés personnalisées sont conservés.

data-* et aria-* changent-ils ?

Non. JSX accepte les deux en kebab, le convertisseur ne touche à rien. Seuls les attributs DOM standard sont renommés.

Les commentaires HTML sont-ils convertis ?

Oui. devient {/* commentaire */} pour conserver l’intention sans casser le parser.

Et les scripts et handlers inline ?

Le convertisseur renomme onclick en onClick et les autres handlers, mais le corps de la fonction reste une chaîne. On le réécrit en général comme callback React avant la mise en prod.

Mon HTML est-il envoyé quelque part ?

Non. La transformation reste dans cet onglet. Toova ne voit pas ce que vous collez — pas d’analytics, pas de logs, rien.

HTML vers JSX — class, for, style, handlers

Convertisseur HTML → JSX

Conçu pour la confidentialité — fonctionne entièrement dans votre navigateur

Collez du HTML à gauche, copiez du JSX prêt pour React à droite. Le convertisseur réécrit class en className, for en htmlFor, les chaînes style inline en objets camelCase et auto-ferme les void elements comme img et input pour que JSX puisse les parser.

Renommage des attributs et événements

React utilise les noms de propriété DOM plutôt que les attributs HTML : tabindex devient tabIndex, readonly devient readOnly, colspan devient colSpan. Les handlers inline passent de onclick à onClick, de onmouseover à onMouseOver, et ainsi de suite pour chaque handler standard. Les deux renommages spécifiques HTML sont class en className et for en htmlFor, car ce sont des mots réservés en JavaScript.

Chaînes style en objets camelCase

JSX exige des styles inline sous forme d’objet, chaque propriété CSS en camelCase. Une chaîne comme padding: 1rem; background-color: #fff devient style={{ padding: '1rem', backgroundColor: '#fff' }}. Le convertisseur gère kebab-case vers camelCase, les préfixes vendeur (-webkit-, -moz-, -ms-) et les propriétés personnalisées CSS (--brand-color reste tel quel, avec clé entre guillemets si besoin).

Confidentialité et cas particuliers

La transformation s’exécute dans une seule fonction JavaScript de cet onglet. Votre HTML ne quitte pas le navigateur — utile quand vous portez du markup avec données client. Les 14 void elements (img, input, br, hr, meta, link, area, base, col, embed, source, track, wbr, param) sortent auto-fermés afin que JSX les accepte. Les attributs data- et aria- restent intacts, ils sont déjà valides en JSX.

Questions fréquentes

Quels attributs sont renommés ?: class en className, for en htmlFor, tabindex en tabIndex, readonly en readOnly, colspan en colSpan, plus le camelCase pour toutes les propriétés DOM standard et handlers on*.
Comment la chaîne style est-elle convertie ?: Elle est découpée aux points-virgules, chaque propriété CSS est mise en camelCase et un objet JSX à double accolade est émis. Préfixes vendeur et propriétés personnalisées sont conservés.
data-* et aria-* changent-ils ?: Non. JSX accepte les deux en kebab, le convertisseur ne touche à rien. Seuls les attributs DOM standard sont renommés.
Les commentaires HTML sont-ils convertis ?: Oui.  devient {/* commentaire */} pour conserver l’intention sans casser le parser.
Et les scripts et handlers inline ?: Le convertisseur renomme onclick en onClick et les autres handlers, mais le corps de la fonction reste une chaîne. On le réécrit en général comme callback React avant la mise en prod.
Mon HTML est-il envoyé quelque part ?: Non. La transformation reste dans cet onglet. Toova ne voit pas ce que vous collez — pas d’analytics, pas de logs, rien.