Outils de design

HTML vers JSX — Convertisseur d’attributs React

Convertissez des extraits HTML en React JSX dans le navigateur. Renommez class/for en className/htmlFor, fermez les balises void et convertissez les styles en ligne en forme d'objet. La conversion reste locale.

Accès rapide→CSS vers Tailwind

HTMLJSXReact

Accès rapide:CSS vers Tailwind HTML vers Markdown Markdown vers HTML

Ajouter cet outil aux favoris

Aucun mode de stockage des favoris n’a été sélectionné.

Actions rapides

Retour à Outils de design Parcourir tous les outils

Copiez l’URL de cet outil ou ouvrez la feuille de partage du système sur un appareil compatible.

Cas d’usage

Transformez le balisage statique en un démarreur de composant React
Coller le SVG exporté dans JSX
Corriger la classe et les attributs copiés à partir de modèles

Mode d’emploi

Coller ou saisir du HTML
Examiner la sortie JSX à droite
Copier JSX

Exemples d’entrée et de sortie

HTML

<img src="a" class="b">

JSX

<img src="a" className="b" />

FAQ

Traduit-il les scripts ou la logique des composants ?

Non. Il ne gère que les noms d'attributs au niveau DOM, la fermeture des balises vides et la syntaxe associée, et non la logique du framework.

Comment les styles en ligne sont-ils gérés ?

les attributs de style sont convertis en objets de style React lorsque cela est possible. Les expressions complexes nécessitent toujours une vérification manuelle.

Outils

Outils associés

Poursuivez avec un autre outil traduit pour une tâche proche.

CSS vers Tailwind

CSS vers Tailwind – Mappeur de déclaration

Disponible

Collez les déclarations CSS et mappez-les aux classes d'utilitaires Tailwind lorsque cela est possible. Les règles communes de disposition, d'espacement et de couleur deviennent des classes standard ; les valeurs sans correspondance reviennent à une syntaxe de valeurs arbitraires.

CSS Tailwind Conversion

Ouvrir l’outil

HTML vers Markdown

HTML vers Markdown en ligne

Disponible

Collez du HTML et obtenez un Markdown prêt à modifier. Le traitement s’effectue directement dans votre navigateur afin que le contenu reste sur la page.

HTML Markdown Conversion

Ouvrir l’outil

Markdown vers HTML

Markdown vers HTML en ligne

Disponible

Collez du Markdown, prévisualisez le résultat et copiez le HTML. Le traitement s’effectue directement dans votre navigateur afin que le contenu reste sur la page.

Markdown HTML Conversion

Ouvrir l’outil