⚛️ 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.
Guía: Convertidor HTML a JSX
¿Qué es?
JSX tiene diferencias clave respecto a HTML: atributos en camelCase (className vs class, htmlFor vs for), todos los elementos deben cerrarse, estilos inline como objetos JS. Pegar HTML directamente en React produce errores — este convertidor transforma HTML en JSX válido.
Cómo usar
- Pega tu HTML en el panel izquierdo.
- El JSX equivalente aparece instantáneamente.
- Revisa las conversiones:
class→className, eventos en camelCase. - Copia el JSX para tu componente React.
Consejos
- JSX requiere un único elemento raíz — envuelve múltiples en
<>...</>. - Los atributos con guiones (
data-id,aria-label) se mantienen igual en JSX. - Las expresiones JS en JSX van entre llaves:
{variable}.