HTML to JSX Converter — Free Online React Converter

JSX requires different attribute names than HTML. class must be className (class is a reserved JavaScript keyword), for on labels must be htmlFor, inline style must be a JavaScript object with camelCase properties rather than a CSS string, and event attributes like onclick must be camelCase (onClick). Void elements like br and img must be self-closed with a slash. This converter handles all of these transformations automatically.

class is a reserved keyword in JavaScript used to define ES6 classes. If JSX used the attribute name class, the JavaScript parser would throw a syntax error during compilation. React uses className instead. When React renders JSX to the real DOM, it automatically converts className back to the HTML class attribute.

HTML inline styles are CSS strings: style="background-color: red; font-size: 16px". JSX requires a JavaScript object: style={{ backgroundColor: "red", fontSize: "16px" }}. The converter parses the CSS string, camelCases every property name (background-color → backgroundColor, border-radius → borderRadius), and wraps the result in double braces.

All on* HTML event attributes are converted to camelCase React equivalents: onclick → onClick, onmouseover → onMouseOver, onkeydown → onKeyDown, onchange → onChange, onsubmit → onSubmit, onfocus → onFocus, onblur → onBlur. React uses camelCase for all event handlers consistently.

In HTML5, void elements have no closing tags. In JSX, all elements must be explicitly closed — void elements get a self-closing slash: <br />, <img />, <input />, <hr />. The converter auto-closes all recognized void elements, preventing the "JSX element has no corresponding closing tag" compile error.

Yes. Toggle "Wrap in component" to surround the JSX output in a default-exported named functional component: export default function Component() { return (...) }. Rename the placeholder name in your editor after pasting — this makes the output paste-ready as a complete new component file.

Yes. data-* and aria-* attributes are identical in HTML and JSX — they pass through unchanged. Only the attributes that differ between HTML and JSX (class, for, style, on* events) are transformed.

Paste the HTML snippet directly into the converter. All class attributes are converted to className — this includes complex Tailwind class strings and Bootstrap utility classes, which are preserved exactly as-is since JSX just changes the attribute name, not the values. If the template uses data-bs-* Bootstrap JavaScript attributes or aria- accessibility attributes, these pass through unchanged. Event handlers like onclick="myFunction()" are converted to the camelCase form onClick but their string values are left as-is — in a real component you would replace the string value with a proper JSX event handler function reference.

dangerouslySetInnerHTML is a React prop that injects a raw HTML string into the DOM without converting it to JSX: <div dangerouslySetInnerHTML={{ __html: htmlString }} />. This is appropriate when the HTML is dynamic and user-generated (a rich-text editor output, a CMS body field, a server-rendered HTML block) — content you cannot control at build time. Use this converter when the HTML is static and known at build time — a template you copied from a UI kit, documentation, or design tool. Converting to real JSX is always preferable for static content because React can manage the output correctly, whereas dangerouslySetInnerHTML bypasses React's rendering and can introduce XSS vulnerabilities if the HTML contains untrusted input.

HTML5 parsers are designed to handle missing closing tags gracefully — <br> is perfectly valid HTML. JSX is compiled by a JavaScript parser (Babel or the TypeScript compiler) that follows XML-like rules requiring every opening tag to have a closing tag or a self-closing slash. Without the slash, <br> in JSX throws a "JSX element has no corresponding closing tag" compile error that stops your build. The converter adds the required slash to all recognized void elements: br, hr, img, input, area, base, col, embed, link, meta, param, source, track, and wbr. This is a purely syntactic transformation — the rendered HTML output is identical.

The converter handles any amount of HTML markup in a single pass — paste a full page template, a multi-section layout, or an entire email template and the JSX output covers all of it. For large HTML files intended to become multiple React components, the best approach is to paste the full HTML first to get the converted JSX, then manually split it into component functions. The "Wrap in component" toggle wraps the entire output in one functional component — this is a good starting point from which to extract smaller sub-components.

Yes, and this is one of the most common use cases. HTML email templates are built with extensive inline styles (since email clients do not support external stylesheets) and many attribute-driven formatting properties. All inline style strings are converted to JavaScript style objects automatically, which is the exact format React Email and similar libraries require. After converting, replace generic HTML tags with React Email's semantic components (<Html>, <Body>, <Section>, <Text>, <Button>) as needed — the attribute conversions are already handled.