⚛️ HTML ↔ JSX Converter
Convert HTML snippets to valid JSX for React components. Handles className, camelCase props, and self-closing tags. Free online HTML to JSX converter — no signup.
How to Use
1
Choose direction
Select HTML → JSX to prepare HTML for React, or JSX → HTML to get standard HTML output.
2
Paste your code
Paste your HTML or JSX into the input area. Conversion happens automatically.
3
Copy the result
Click Copy. Your converted code is ready to paste into your project.
Frequently Asked Questions
What is the difference between HTML and JSX?
JSX is a syntax extension for JavaScript used in React. Key differences: class becomes className, for becomes htmlFor, event handlers are camelCase (onclick → onClick), all tags must be self-closing (<br /> not <br>), and inline styles use objects ({color:"red"} not "color:red").
How do I convert class to className automatically?
This tool automatically converts all class="..." attributes to className="..." and for="..." to htmlFor="...". It also fixes event attributes (onclick, onchange, etc.) to their React camelCase equivalents.
What happens to HTML comments in JSX?
HTML comments (<!-- comment -->) are converted to JSX comments ({/* comment */}). JSX requires wrapping them in curly braces as JavaScript expressions.
Does JSX require all tags to be self-closing?
Tags with no children must be self-closed in JSX: <br />, <input />, <img />, <hr />. This tool automatically adds the closing slash to all void HTML elements when converting HTML to JSX.
Can I convert JSX back to HTML?
Yes — select JSX → HTML direction. The tool converts className back to class, htmlFor to for, reverts camelCase events to HTML attributes, and converts self-closing tags back to HTML void element syntax.
Guide : Convertisseur HTML vers JSX
Qu'est-ce que c'est ?
Le Convertisseur HTML vers JSX transforme le HTML standard en JSX valide pour React : renomme class en className, for en htmlFor, convertit les styles inline et ferme les balises auto-fermantes.
Évitez les erreurs JSX courantes lors de la migration de templates HTML vers des composants React.
Comment utiliser
- Collez votre HTML dans le panneau d'entrée.
- Le JSX converti apparaît dans le panneau de droite.
- Vérifiez les conversions surlignées (attributs renommés, styles convertis).
- Copiez et intégrez dans votre composant React.
Conseils professionnels
- Encapsulez toujours le JSX multi-éléments dans un fragment
<>...</>ou une div parent. - Les commentaires HTML
<!-- -->doivent être convertis en{/* */}en JSX.