HTML to JSX Converter
Convert HTML into valid JSX — attribute names, inline styles, comments, and self-closing tags all handled.
Your Data Never Leaves Your Device
Every tool runs entirely in your browser. Nothing you type is uploaded, stored, or logged on our servers.
The HTML to JSX Converter handles the differences that stop HTML compiling when pasted into a React component. class and for collide with JavaScript reserved words and become className and htmlFor; hyphenated attributes like stroke-width become camelCase; inline style strings become objects; HTML comments become JSX expression comments; and void elements such as <br> and <img> must be explicitly self-closed.
Attributes that JSX passes through untouched are deliberately left alone — data-* and aria-* keep their hyphens, since camelCasing them would actually break them. SVG markup is fully supported, so pasted icons convert cleanly; if you are working with an SVG file, the SVG Optimizer shrinks it before producing the same component output.
FAQ
JSX is not HTML. Reserved words force renames (class becomes className, for becomes htmlFor), hyphenated attributes become camelCase, inline styles must be objects rather than strings, and every void element such as <br> must be explicitly self-closed.
A style string becomes a style object with camelCased properties, so style="font-size: 12px" becomes style={{ fontSize: "12px" }}. CSS custom properties keep their exact names and stay quoted, since --my-var is not a valid identifier.
They keep their hyphens, because JSX passes them through unchanged. Only standard HTML attributes are camelCased — converting data-test-id would actually break it.
Yes. SVG attributes like stroke-width, fill-rule, and xlink:href are converted to their JSX equivalents. For SVG specifically, the SVG Optimizer tool also shrinks the markup before converting it.
They become JSX expression comments, since raw HTML comment syntax is not valid inside JSX and would render as literal text or fail to compile.
No. The conversion is a pure text transform running in your browser.