HTML to JSX Converter (React)

Copying HTML into a React component breaks on the first class attribute: JSX is JavaScript, so it needs className instead of class, htmlFor instead of for, a style object instead of a style string, camelCase event and SVG attribute names, every element closed, and braces in text escaped. Paste HTML from a template, a design tool or a snippet site and get valid JSX, optionally wrapped in a function component, with notes on anything that behaves differently in React.

How to use this tool

1. Paste the HTML — a fragment or a whole page (only the <body> is converted).
2. Optionally enter a component name to get an export default function around it.
3. Choose whether value/checked become defaultValue/defaultChecked and whether inline handlers become arrow functions.
4. Copy the JSX and check the notes.

Formula

class → className · for → htmlFor · tabindex → tabIndex · style="a-b: c" → style={{ aB: "c" }} · onclick="f()" → onClick={(event) => { f() }} · <br> → <br />

Attributes follow React's DOM property names; data-* and aria-* stay as they are. Inside <svg>, hyphenated attributes become camelCase (stroke-width → strokeWidth) and lowercase names are restored (viewbox → viewBox). Text characters JSX reserves are escaped: { and } as {'{'} and {'}'}, > as &gt;. Comments become {/* */}. Several top-level nodes are wrapped in a <> fragment. Missing optional end tags (li, p, td…) are added.

Example

In the sample, class="card" becomes className, the style string becomes style={{ padding: "16px", borderRadius: "8px" }}, for="email" becomes htmlFor, <input … value="" autofocus tabindex="1"> becomes <input … defaultValue="" autoFocus tabIndex="1" />, onclick="subscribe()" becomes onClick={(event) => { subscribe() }}, the braces in "Join {free}" are escaped, and inside the SVG viewbox and stroke-width become viewBox and strokeWidth. The result is wrapped in a SignupCard component, with the comment kept as {/* signup card */} inside a fragment.