HTML to JSX
Convert HTML markup into JSX you can paste into a React component. class becomes className, for becomes htmlFor, inline style strings become style objects with camelCased keys, and void elements are self-closed. Attributes that cannot be converted, such as event handlers, are kept as-is and listed under the output, never silently dropped.
JSX will appear hereHow to use the HTML to JSX
- Paste HTML in the left pane (a snippet from a template, or markup copied from a page).
- Leave the conversion toggles on unless you want raw attributes kept as-is; the fragment toggle wraps multi-root output in <> </>.
- Press Convert, then copy the JSX or download it as a .jsx file.
Example
Watch class become className, the label for become htmlFor, the void elements self close, and the inline style become an object.
<div class="card"> <label for="email">Email</label> <input type="email" id="email"> <img src="logo.png" alt="Logo"> <p style="color: red; margin-top: 8px">Hello</p> </div>
Frequently asked questions
What happens to attributes JSX does not know?
They are kept exactly as written and listed in a note under the output, so nothing disappears silently. Event handler attributes such as onclick are also kept and listed, because converting them to functions is a decision only you can make.
How are inline styles converted?
The style string is split into declarations, property names are camelCased (margin-top becomes marginTop), and unitless numeric properties such as z-index and opacity become numbers. Everything else stays a string, exactly as CSS would read it.