HTML to JSX Converter
Paste any HTML and get valid JSX instantly. Converts class→className, for→htmlFor, inline styles to objects, self-closing void tags, HTML comments, and all common event handlers.
HTML Input
JSX Output
What gets converted
class=→className=for=→htmlFor=tabindex=→tabIndex=readonly→readOnlyautocomplete=→autoComplete=autofocus→autoFocusmaxlength=→maxLength=enctype=→encType=crossorigin=→crossOrigin=onclick=→onClick=onchange=→onChange=onsubmit=→onSubmit=style="..."→style={{ ... }}<br>→<br /><!-- -->→{/* */}Why HTML and JSX Are Not the Same
React's JSX syntax looks like HTML but it compiles down to JavaScript function calls. Because JSX lives inside JavaScript files, it must avoid conflicts with reserved JS keywords and follow stricter XML-style rules. The most common issues developers encounter when copying HTML from design tools, static sites, or email templates into a React component are attribute naming mismatches, unclosed void elements, and inline style format differences.
This converter handles every standard transformation automatically so you can paste raw HTML and drop the output directly into a .tsx or .jsx file without manual edits.
Inline Style Conversion in Detail
Inline styles are the most complex transformation between HTML and JSX. HTML style attributes are CSS strings, while JSX expects a JavaScript object with camelCased property names. This converter maps every standard CSS property to its React camelCase equivalent — for example, background-color becomes backgroundColor, font-size becomes fontSize, and so on across 150+ properties. Values are preserved as strings inside single quotes.
| HTML | JSX |
|---|---|
| style="color: red" | style={{ color: 'red' }} |
| style="font-size: 16px" | style={{ fontSize: '16px' }} |
| style="background-color: #fff" | style={{ backgroundColor: '#fff' }} |
| style="margin-top: 8px; padding: 4px" | style={{ marginTop: '8px', padding: '4px' }} |
Common Use Cases for HTML-to-JSX Conversion
The most frequent scenarios where you need to convert HTML to JSX are: copying markup from Figma-to-HTML export tools, migrating static HTML websites to React or Next.js, integrating HTML email templates into React rendering pipelines, and pasting snippets from CSS frameworks like Bootstrap or Bulma that use HTML-style attribute names. Beyond attribute names, always check that href, src, and custom data attributes do not need dynamic binding, and that any JavaScript expressions are wrapped in curly braces.
Frequently Asked Questions
What is JSX and how does it differ from HTML?
JSX (JavaScript XML) is a syntax extension for JavaScript used in React that looks like HTML but has key differences. In JSX, attribute names follow camelCase conventions (className instead of class, htmlFor instead of for), all elements must be properly closed including void elements like <br />, inline styles are written as JavaScript objects rather than strings, and event handlers use camelCase names like onClick instead of onclick. JSX is transpiled to React.createElement() calls by Babel or similar tools.
Why do I need className instead of class in JSX?
The HTML attribute 'class' conflicts with the JavaScript reserved keyword 'class' (used to define ES6 classes). To avoid ambiguity in JSX — which compiles to JavaScript — React uses 'className' as the prop name for CSS classes. The underlying DOM still receives the correct 'class' attribute when React renders to the DOM; the renaming is purely at the JSX/JavaScript layer. Similarly, 'for' on <label> elements conflicts with the JavaScript 'for' loop keyword, hence 'htmlFor'.
How are inline styles different between HTML and JSX?
In HTML, inline styles are written as CSS strings: style="color: red; font-size: 16px". In JSX, the style prop expects a JavaScript object where CSS property names are camelCased: style={{ color: 'red', fontSize: '16px' }}. The outer braces {} are JSX expression delimiters, and the inner braces {} define the JavaScript object literal. Vendor-prefixed properties also become camelCase, e.g. -webkit-transform becomes WebkitTransform.
Why must void elements like <br> and <img> be self-closed in JSX?
JSX follows XML/XHTML syntax rules, which require all elements to have an explicit closing. In HTML5, void elements such as <br>, <hr>, <img>, and <input> do not need a closing tag. But JSX (and the React JSX transform) will throw a parse error if you leave them open. The self-closing syntax <br /> signals that the element has no children and is valid in both XML and React's JSX parser.
Are HTML comments valid in JSX?
Standard HTML comments (<!-- -->) are not valid JSX syntax. JSX is JavaScript, so you must use JavaScript comment syntax inside JSX expressions. Single-line: {// comment} and multi-line: {/* comment */} are the two valid forms. This converter transforms HTML comments into JSX block comments {/* ... */} automatically. Note that {// comment} requires the closing } to be on a new line, so block-comment style is generally preferred.