Convertisseur HTML vers JSX gratuit

Le convertisseur HTML vers JSX est un outil en ligne gratuit qui transforme le balisage HTML en syntaxe JSX valide pour une utilisation dans les composants React.

Oui, il est entièrement gratuit et ne nécessite aucune inscription. Toute la conversion s'effectue côté client, dans votre navigateur.

Le convertisseur HTML vers JSX remplace class par className, convertit les styles en ligne en objets, auto-ferme les éléments vides et gère les autres différences entre HTML et JSX.

Absolument. Le HTML to JSX Converter traite tout côté client, dans votre navigateur. Aucune donnée n'est téléchargée ni stockée sur un serveur. Votre contenu reste à tout moment privé sur votre appareil.

Oui, le HTML to JSX Converter est entièrement responsive et fonctionne sur les smartphones et les tablettes. Vous pouvez l'utiliser sur n'importe quel appareil doté d'un navigateur web moderne, sans aucune application à télécharger.

Aucun compte ni inscription n'est nécessaire. Ouvrez simplement le HTML to JSX Converter dans votre navigateur et commencez à l'utiliser immédiatement. Il n'y a ni inscription obligatoire ni restriction d'utilisation.

Saisissez simplement votre contenu dans le champ prévu, ajustez les paramètres selon vos préférences, et l'outil le traitera instantanément. Vous pouvez ensuite copier le résultat dans le presse-papiers ou le télécharger.

Le HTML to JSX Converter fonctionne dans tous les navigateurs modernes, y compris Chrome, Firefox, Safari, Edge et Opera. Pour une expérience optimale, utilisez la dernière version de votre navigateur préféré.

JSX ressemble presque trait pour trait au HTML, mais il s'agit en réalité de syntaxe JavaScript compilée en éléments React : il suit donc les règles de JavaScript plutôt que celles du navigateur. Les différences concrètes sont précisément là où un balisage recopié échoue : l'attribut HTML "class" devient "className" et "for" devient "htmlFor", car ces deux mots sont réservés en JavaScript. Les attributs à plusieurs mots comme "tabindex" et "maxlength" passent en camelCase pour donner "tabIndex" et "maxLength", les chaînes "style" en ligne deviennent des objets JavaScript, et les balises void comme "<img>" et "<br>" doivent être explicitement auto-fermées. JSX attend aussi un unique élément racine, donc des balises sœurs doivent être enveloppées dans un conteneur ou un Fragment. Ces réécritures mécaniques sont faciles à oublier à la main sur un fichier volumineux. Collez votre HTML ci-dessus et le convertisseur applique instantanément chacune de ces règles, pour un résultat qui s'intègre directement dans un composant React.

React affiche cet avertissement parce que "class" est un mot-clé réservé en JavaScript, et JSX compile vers du JavaScript plutôt que vers du HTML brut. Pour éviter tout conflit avec le langage, React renomme l'attribut en "className", qu'il retraduit ensuite en véritable attribut "class" dans le DOM au moment du rendu. La même logique s'applique à "for" sur les éléments label, qui devient "htmlFor". Si vous collez du HTML directement dans un composant sans renommer ces attributs, React affiche un avertissement dans la console ou n'applique pas votre style, puisqu'il ignore la prop "class" non reconnue. Corriger chaque occurrence à la main dans un long template est fastidieux et source d'erreurs. Ce convertisseur renomme automatiquement "class" en "className" et "for" en "htmlFor" : collez votre balisage ci-dessus et les avertissements disparaissent.

En HTML, les styles en ligne forment une seule chaîne comme style="margin-top: 10px; font-size: 14px". JSX attend au contraire un objet JavaScript dont les clés sont des propriétés CSS en camelCase et dont les valeurs sont des chaînes, le tout entouré de doubles accolades : style={{ marginTop: '10px', fontSize: '14px' }}. Les accolades extérieures indiquent à JSX que vous passez une expression JavaScript, et les accolades intérieures forment l'objet lui-même. Les noms de propriétés avec tirets passent en camelCase : "margin-top" devient "marginTop" et "background-color" devient "backgroundColor". Convertir cela à la main est source d'erreurs, surtout avec de nombreuses déclarations ou des préfixes vendeurs. Cet outil analyse chaque style en ligne et le réécrit automatiquement en objet JSX correct, en passant les propriétés en camelCase et en mettant les valeurs entre guillemets. Collez un balisage contenant des attributs style ci-dessus et consultez le panneau de résultat pour voir les objets convertis.

Le balisage SVG copié depuis des outils de design ou des bibliothèques d'icônes utilise des noms d'attributs avec tirets comme fill-rule, stroke-width et clip-path, valides en HTML mais invalides comme props JSX. Comme JSX est du JavaScript, un tiret est interprété comme un signe moins : React rejette donc ces attributs tant qu'ils ne sont pas passés en camelCase, sous la forme fillRule, strokeWidth et clipPath. Il en va de même pour de nombreux attributs de filtre et de dégradé dans les SVG complexes. En oublier ne serait-ce qu'un seul suffit généralement à bloquer la compilation ou à rendre l'icône invisible, et une icône volumineuse peut en compter des dizaines. Ce convertisseur reconnaît les attributs SVG et les passe automatiquement en camelCase tout en préservant la structure et le viewBox, si bien que l'icône s'affiche correctement dès que vous la collez dans un composant. Déposez votre SVG dans le champ de saisie ci-dessus et copiez le balisage prêt pour React depuis le panneau de résultat.

Oui. Au-delà de la traduction des attributs, le convertisseur peut structurer le résultat en un composant prêt à l'emploi plutôt que de laisser un balisage brut. Vous pouvez générer un fichier .jsx classique ou une version TypeScript .tsx, et envelopper le résultat dans un composant fonction nommé ou une fonction fléchée, avec l'instruction d'import React correspondante générée automatiquement. Si votre extrait contient plusieurs éléments de premier niveau, l'encapsulation en Fragment les renvoie comme un nœud unique, rendant le composant valide sans div superflu. Vous pouvez aussi régler la taille d'indentation, choisir entre guillemets simples ou doubles, et extraire les valeurs répétées sous forme de props. Le panneau de résultat ajoute un diff ligne par ligne et une vue côte à côte pour vérifier chaque changement, ainsi qu'un onglet de traitement par lot pour convertir plusieurs extraits en une seule passe. Réglez vos options de sortie ci-dessus, puis copiez ou téléchargez le composant terminé.