HTML to JSX Converter | Drop raw HTML in, get React-ready JSX out

Pasting plain HTML straight into a React component breaks the build: class and for are reserved words, inline styles are strings instead of objects, and void tags aren't self-closed. This converter rewrites all of that in a single pass so you can move markup into JSX without hunting down each error by hand.

💡 About this tool

Anyone migrating a static landing page, a snippet from a design tool, or an old jQuery template into React hits the same wall. JSX looks like HTML but compiles to JavaScript, so the attribute names that JavaScript already claims have to change: class becomes className, for becomes htmlFor. Event attributes such as onclick must be camelCased to onClick, inline style="color: red" has to become the object form style={{color: 'red'}}, and elements like <img> or <br> need an explicit /> or React's parser throws.

This tool runs five transforms on whatever you paste: it remaps reserved attribute names, camelCases event handlers, turns inline style strings into style objects, self-closes void elements, and rewrites <!-- --> comments into JSX {/* */} syntax. Copy the output and paste it directly into your component.

🧐 Frequently Asked Questions

Which attributes besides class get converted? for to htmlFor, tabindex to tabIndex, maxlength to maxLength, colspan to colSpan, readonly to readOnly, and the other camelCase attributes React expects.

How are inline styles handled? A string like style="color: red; line-height: 1.5" becomes style={{color: 'red', lineHeight: 1.5}}: hyphenated CSS properties are camelCased, pure numbers stay unquoted, and everything else is wrapped as a string (a value with a unit such as 14px becomes the string '14px').

Does it close void tags like <input> and <img>? Yes. It detects the HTML void elements (img, br, input, hr, meta, link, and so on) and appends />.

Will React complain about multiple root elements? This tool only transforms syntax. If your snippet returns several siblings, wrap them in a fragment (<>...</>) after pasting; that adjustment is on you.

What happens to comments? <!-- note --> is rewritten to the valid JSX form {/* note */}.

📚 Why JSX can't just be HTML

JSX looks deceptively like HTML, but it is syntactic sugar over JavaScript function calls. A bundler such as Babel compiles each element into a React.createElement call at build time, which is why the browser never sees JSX directly. class is off-limits because JavaScript reserves it for class declarations, and for collides with the for loop. There are dozens of these renamed attributes, and missing even one produces a confusing warning rather than a clear error, so automating the mechanical substitutions removes a common source of friction during migration.