HTML to JSX Converter
Convert HTML to React JSX — class→className, inline styles to objects, self-closing void elements
You’re copying HTML from a design mockup, existing website, or template and pasting it into a React component. The problem: HTML and JSX syntax differ in enough ways that it won’t work as-is. class must become className, for must become htmlFor, style="color: red" must become style={{ color: 'red' }}, and void elements need self-closing slashes. This tool handles all of that automatically.
HTML vs JSX: What Changes
| HTML | JSX |
|---|---|
class="foo" | className="foo" |
for="input" | htmlFor="input" |
style="color: red; font-size: 14px" | style={{ color: 'red', fontSize: '14px' }} |
<br>, <img src="..."> | <br />, <img src="..." /> |
onclick="fn()" | onClick={fn} |
tabindex="0" | tabIndex={0} |
<!-- comment --> | {/* comment */} |
<input checked> | <input checked={true} /> |
| Boolean attributes without value | attribute={true} |
| Numeric attributes | attribute={number} |
Style String Conversion
HTML style strings use kebab-case property names with string values: style="background-color: #fff; font-size: 14px". JSX requires a JavaScript object with camelCase property names: style={{ backgroundColor: '#fff', fontSize: '14px' }}.
Numeric values like font-size: 14px become fontSize: 14 (unitless for px) or fontSize: '14px' depending on context. This tool preserves the px suffix as strings for clarity.
Self-Closing Void Elements
HTML void elements (<br>, <hr>, <img>, <input>, <link>, <meta>, <area>, <base>, <col>, <embed>, <param>, <source>, <track>, <wbr>) do not have closing tags in HTML but must be self-closed in JSX: <br />, <img src="..." />.
Frequently Asked Questions
Does the converter handle event handlers?
Yes. HTML event attributes (onclick, onchange, onkeydown, etc.) are converted to camelCase React event props (onClick, onChange, onKeyDown). The value is kept as-is — you’ll need to replace string function calls with actual React callback references.
What about data-* and aria-* attributes?
These pass through unchanged — they use the same syntax in HTML and JSX. data-testid="foo" and aria-label="Close" work as-is in React.
Can the converter handle multiline HTML? Yes. Paste any amount of HTML — the converter processes the full input.
Does it add the React import?
The converter wraps the output in a React functional component with export default function Component() { return ( ... ); }. You can remove the wrapper if you just need the JSX fragment.