How this converter works
JSX looks like HTML but the differences are exactly where copy-paste breaks: class becomes className, for becomes htmlFor, every element must close, inline styles must be objects and event handlers must be functions. This converter parses the markup into a tree, rewrites all of that, and prints clean, re-indented JSX. Pick React, Preact or Solid at the top; Preact and Solid keep class and for and kebab-case SVG attributes, and Solid gets kebab-case style keys.
It handles the details people forget. Void elements are self-closed and unclosed <p>, <li> or <td> tags are closed the way a browser would. Comments become {/* ... */}. SVG attributes like stroke-width and xlink:href get the names React needs, and lowercased SVG names like viewbox are restored. value and checked become defaultValue and defaultChecked, the selected option moves to the select, textarea content becomes defaultValue, bare table rows get a <tbody>, numeric attributes such as tabIndex become numbers, <pre> whitespace is kept, and entities JSX doesn't know are decoded.
Inline handlers are rewritten too: onclick="save(this)" becomes onClick={(event) => save(event.currentTarget)}, and return false becomes event.preventDefault(). Turn on a component wrapper to get an export default function or arrow component (optionally TypeScript, with {...props} spread on the root), clean pasted SVG icons and switch them to currentColor, or swap in Next.js Link, Image and Script. The What changed table and the warnings list everything that was rewritten or needs a look.
Frequently asked
Does it convert a full HTML document?
Yes. With Body contents only on (the default), the doctype, <html>, <head> and <body> are dropped and what is inside <body> is converted; a warning lists what was in the head so you can move it to your framework's metadata API. Turn the option off to keep the whole document.
What happens to onclick and other inline handlers?
By default they become arrow functions: onclick="go()" turns into onClick={() => go()}, this becomes event.currentTarget and return false becomes event.preventDefault(). Handlers that can't be rewritten safely, such as multi-line code, stay as strings with a warning. You can also keep them all as strings or remove them.
How do I turn an SVG icon into a React component?
Paste the SVG, choose export default function, name it (say ArrowIcon), and turn on Clean up SVG, SVG colors → currentColor and Spread props on root. You get a component without xmlns or editor metadata that follows the text color and accepts className, width and other props. Turn on TypeScript to type the props as ComponentProps<"svg">.
What's different for Preact and Solid?
Both use the real HTML attribute names, so class, for and kebab-case SVG attributes like stroke-width stay as they are, and value and checked are kept instead of becoming defaultValue. Solid's style objects use kebab-case keys ("font-size") because Solid sets them with style.setProperty.
Is whitespace preserved?
Text keeps the whitespace JSX would keep from your input: a space between two inline elements on the same line stays, and where the formatter has to break a line next to an element it adds {" "} so nothing gets glued together. Inside <pre>, multi-line text is written as a template literal so line breaks and indentation survive. Choose Keep input layout to keep your own line breaks.
Is my markup uploaded anywhere?
No. The conversion runs entirely in your browser.