Convertisseur HTML vers JSX

Convertissez du HTML en JSX React valide dans votre navigateur — class devient className, les balises vides s'auto-ferment, et les styles en ligne deviennent des objets style. Votre balisage reste sur votre appareil.

Le convertisseur HTML vers JSX s'exécute entièrement dans votre navigateur. Le balisage que vous collez est analysé et transformé sur votre appareil et n'est jamais téléversé vers ArrayKit.

Ouvrir le formateur HTML

À propos de HTML vers JSX

Le convertisseur HTML vers JSX transforme un bloc de HTML en JSX que vous pouvez déposer directement dans un composant React. Il renomme les attributs sur lesquels React insiste — class devient className et for devient htmlFor — met le reste en camelCase (tabindex → tabIndex, colspan → colSpan), et auto-ferme les éléments vides comme br, img et input pour que le balisage soit valide. Les chaînes style="color:red" en ligne sont analysées en objets style={{ color: 'red' }} aux propriétés en camelCase, et les commentaires HTML deviennent des commentaires JSX. Activez l'option composant pour tout envelopper dans une fonction exportée. Il est conçu pour les développeurs qui portent une maquette, un modèle d'e-mail ou une page statique vers React. Chaque conversion s'exécute dans votre navigateur — le balisage que vous collez ne quitte jamais votre appareil.

Fonctionnalités

Comment utiliser HTML vers JSX

  1. Collez votre HTML dans la zone de saisie à gauche
  2. Lisez le JSX converti dans le panneau de sortie à droite
  3. Activez « Envelopper dans un composant » et nommez-le pour obtenir un composant prêt à l'emploi
  4. Copiez le JSX ou téléchargez-le en fichier .jsx

Exemple

Entrée

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

Sortie

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

for devient htmlFor, class devient className, tabindex devient tabIndex, et l'élément vide <input> s'auto-ferme.

Erreurs courantes et dépannage

Foire aux questions

Quels attributs HTML sont renommés pour le JSX ?
class devient className et for devient htmlFor. De nombreux attributs tout en minuscules passent en camelCase — tabindex en tabIndex, colspan en colSpan, maxlength en maxLength, readonly en readOnly — tandis que les attributs data-* et aria-* sont conservés exactement tels qu'écrits.
Comment convertit-il un attribut style en ligne ?
Une chaîne style="color: red; font-size: 12px" est analysée en objet style React, style={{ color: 'red', fontSize: '12px' }}, avec chaque propriété CSS en camelCase. Les propriétés CSS personnalisées comme --brand et les préfixes fournisseur sont préservés.
Auto-ferme-t-il les éléments vides comme <br> et <img> ?
Oui. Les éléments vides HTML — br, img, input, hr, meta, link, source et les autres — sont produits auto-fermés (<br />, <img … />) pour que le JSX soit valide. Les éléments non vides mais sans contenu sont aussi auto-fermés.
Qu'advient-il des commentaires HTML lors de la conversion ?
Les commentaires HTML sont réécrits dans la syntaxe de commentaire JSX. Si le texte du commentaire contient une séquence étoile-barre oblique, elle est fractionnée pour qu'elle ne puisse pas fermer le commentaire JSX prématurément et casser votre build.
Peut-il envelopper la sortie dans un composant React ?
Activez « Envelopper dans un composant » et donnez-lui un nom. L'outil produit une fonction exportée qui renvoie votre JSX, en enveloppant plusieurs éléments de premier niveau dans un fragment pour qu'il n'y ait qu'un seul élément racine.
Convertit-il onclick et les autres gestionnaires d'événements en ligne ?
Les attributs d'événement en ligne passent en camelCase — onclick en onClick, onchange en onChange — mais la valeur reste une chaîne. Vous devrez tout de même remplacer la chaîne par une véritable fonction gestionnaire dans votre composant.

Outils associés

Tous les outils ArrayKit