JSX will appear here…
You Might Also Like
HTML to JSX Converter — Free Online React Converter
About this tool
Free HTML to React JSX Converter
HTML to JSX Converter is a free, instant browser-based tool that transforms standard HTML markup into valid React JSX syntax — handling all the attribute name conversions, style transformations, and structural differences between the two formats automatically. React's JSX syntax closely resembles HTML but has important differences that cause compile errors if HTML is pasted directly into a component: class must become className because class is a reserved JavaScript keyword, for must become htmlFor, inline styles must be written as JavaScript objects with camelCase property names rather than CSS strings, all event attributes like onclick must become camelCase equivalents like onClick, and void elements like br, img, and input must be self-closed with a forward slash. When migrating HTML templates from a CMS, converting email templates for React Email, embedding Tailwind CSS previews, or learning React by working through existing HTML examples, this converter eliminates the tedious manual find-and-replace process. The tool processes HTML in real time as you paste — the JSX output panel updates instantly without requiring a button press. All conversions run entirely in your browser, which means no data is sent to any server, making it safe to use with proprietary HTML templates or confidential code.
Features
- class → className — all class attributes converted for JSX compatibility in React
- for → htmlFor — label for attributes converted to their React JSX equivalent
- Event handlers camelCased — onclick/onkeydown/onmouseover → onClick/onKeyDown/onMouseOver
- Inline styles → JS objects — CSS property strings parsed, camelCased, and objectified
- Void element self-closing — <br>, <img>, <input>, <hr> converted to self-closed form
- HTML comments → JSX comments — <!-- --> converted to {/* */} throughout
- Boolean attributes normalized — disabled, checked, readonly handled for JSX
- Wrap in component toggle — outputs a complete named default-exported functional component
- Real-time conversion — output updates instantly as you type or paste, no button needed
- 100% client-side — no data sent to any server, safe for proprietary HTML templates
How to Use
Paste your HTML markup into the input panel on the left side of the tool. The converter processes your input automatically and the valid JSX appears in the output panel on the right as you type or paste — no button press required. The conversion handles every standard HTML-to-JSX transformation in one pass. All class attributes become className — both single classes and space-separated class lists are preserved exactly. All for attributes on label elements become htmlFor. Inline style strings like style="background-color: red; font-size: 16px" are parsed and converted to JavaScript style objects like style={{ backgroundColor: "red", fontSize: "16px" }} with all CSS property names camelCased. Event handler attributes — onclick, onmouseover, onkeydown, and all other on* attributes — are converted to their camelCase React equivalents: onClick, onMouseOver, onKeyDown. Void elements — br, hr, input, img, area, base, col, embed, link, meta, param, source, track, and wbr — are automatically self-closed by appending a forward slash before the closing angle bracket. HTML comments are preserved and converted from HTML syntax to JSX syntax: a comment becomes {/* comment */} in the output. Boolean HTML attributes like disabled and checked are normalized to JSX form. Use the "Wrap in component" toggle to wrap the entire JSX output in a named functional component export — useful when you want to paste it directly as a new component file. Click Copy to copy the complete JSX output to your clipboard instantly.
Common Use Cases
Frequently Asked Questions
JSX (JavaScript XML) is a syntax extension for JavaScript used in React that allows you to write markup resembling HTML directly inside JavaScript code. JSX compiles to React.createElement() calls, not to HTML strings. The key differences from HTML are: class must be written as className (class is a reserved JS keyword), for must be htmlFor, inline styles are JavaScript objects with camelCase properties rather than CSS strings, all event handlers are camelCased (onclick → onClick), and void elements must be explicitly self-closed. These differences exist because JSX is parsed by a JavaScript compiler, not an HTML parser.
In JavaScript, class is a reserved keyword used to define ES6 classes (e.g., class MyComponent extends React.Component {}). If JSX used the attribute name class, the JavaScript parser would interpret it as a keyword reference and throw a syntax error during compilation. React uses className as the JSX attribute name for HTML's class attribute to avoid this keyword conflict. When React renders JSX to the actual DOM, it automatically converts className back to the correct HTML class attribute.
HTML inline styles are CSS strings: style="background-color: red; font-size: 16px; margin-top: 8px". JSX inline styles are JavaScript objects where each CSS property is a camelCased key: style={{ backgroundColor: "red", fontSize: "16px", marginTop: "8px" }}. The conversion rules are: hyphenated CSS properties become camelCase (background-color → backgroundColor, border-radius → borderRadius, font-weight → fontWeight), values that are numbers without units like z-index can be plain numbers, and all other values are strings. This converter handles all of these transformations automatically.
All HTML event attributes that follow the on* pattern are converted to their camelCase React equivalents. Examples: onclick → onClick, onmouseover → onMouseOver, onmouseout → onMouseOut, onkeydown → onKeyDown, onkeyup → onKeyUp, onchange → onChange, oninput → onInput, onsubmit → onSubmit, onfocus → onFocus, onblur → onBlur, ondblclick → onDblClick, oncontextmenu → onContextMenu. React's synthetic event system uses camelCase names for all event handlers consistently across every element type.
In HTML5, void elements do not have closing tags: br, hr, img, input, link, meta, area, base, col, embed, param, source, track, and wbr. In JSX, all elements must be explicitly closed — void elements get a self-closing slash before the closing angle bracket: <br />, <img />, <input />, <hr />. The converter automatically identifies and self-closes all recognized HTML void elements it encounters in your input, preventing the "JSX element has no corresponding closing tag" compile error.
Yes. The converter parses the full HTML document tree, not just single elements in isolation. It handles arbitrarily nested HTML — tables inside divs inside sections, lists inside nav elements, forms with nested fieldsets — preserving all indentation and structure. Class conversions, inline style transformations, and event handler camelCasing are applied to every element in the tree recursively, including deeply nested elements inside complex multi-level component structures.
Yes. Toggle the "Wrap in component" option to surround the JSX output in a default-exported named functional React component: export default function Component() { return (...) }. The component name defaults to a generic placeholder — rename it in your code editor after pasting. This makes the output paste-ready as a complete new component file rather than just a JSX fragment that requires a wrapper to be valid on its own.
Yes. Data attributes (data-id, data-value, data-testid, etc.) and ARIA attributes (aria-label, aria-hidden, aria-expanded, aria-controls, etc.) do not need conversion — they are identical in HTML and JSX. The converter preserves them exactly as-is without any transformation. Only the specific attributes that differ between HTML and JSX (class, for, style, and on* event handlers) are transformed; everything else passes through unchanged.