HTML to JSX Converter
Convert HTML to React JSX — class→className, inline styles to objects — 100% in your browser.
About HTML to JSX Converter
Paste HTML and get valid React JSX. It renames attributes React spells differently (class → className, for → htmlFor, tabindex → tabIndex and many more), turns inline style strings into JSX style objects with camelCased properties, self-closes void elements like <img> and <br>, and converts HTML comments into JSX comment syntax.
It parses your markup with the browser's own HTML parser, so it handles real-world, imperfect HTML the way a browser would. Everything runs locally in your browser; nothing is uploaded.
Attribute & style conversion
<label for="n" class="lbl" style="margin-top:4px">Name</label>
<label htmlFor="n" className="lbl" style={{ marginTop: "4px" }}>
Name
</label>Multiple top-level elements are wrapped in a <> </> fragment.
Frequently asked questions
What does it convert?
Attribute names (class→className, for→htmlFor, and other camelCase props), inline style strings into style objects, void elements to self-closing tags, and HTML comments to JSX {/* */} comments.
Does it handle inline styles?
Yes. A style="margin-top: 4px" attribute becomes style={{ marginTop: "4px" }}, with CSS custom properties kept as quoted keys.
What if I paste multiple top-level elements?
They're wrapped in a JSX fragment (<> … </>) so the result is a single valid expression you can return from a component.
Is my HTML uploaded anywhere?
No. Conversion happens entirely in your browser.