HTML to JSX Converter
To convert HTML to JSX for React: change class to className, for to htmlFor, convert inline style strings to objects (style={{ color: 'red' }}), self-close void elements (<br> becomes <br />), use camelCase for event handlers (onclick to onClick) and attributes (tabindex to tabIndex), and wrap comments in {/* */}. SVG attributes also use camelCase: stroke-width becomes strokeWidth.
Convert HTML to JSX for React. Automatically converts class to className, for to htmlFor, style strings to objects, self-closes void elements, converts event handlers to camelCase. Handles SVG attributes. Presets for forms, cards, tables, and SVG icons.
HTML Input
HTML to JSX Conversion Rules
| HTML | JSX | Why |
|---|---|---|
| class="btn" | className="btn" | class is reserved in JS |
| for="name" | htmlFor="name" | for is reserved in JS |
| style="color: red" | style={{ color: 'red' }} | Style must be an object |
| tabindex="0" | tabIndex="0" | camelCase attributes |
| onclick="fn()" | onClick="fn()" | camelCase events |
| <!-- comment --> | {/* comment */} | JSX comment syntax |
| <img src="x"> | <img src="x" /> | Self-closing required |
| <br> | <br /> | Self-closing required |
| disabled="disabled" | disabled | Boolean attribute |
| maxlength="10" | maxLength="10" | camelCase attribute |
How to Use
- 1
Paste your HTML
Paste HTML code into the input area, or click a preset (Form, Card, Table, SVG Icon) to see a conversion example
- 2
Review JSX output
The converted JSX appears instantly with class changed to className, styles as objects, self-closing tags, and camelCase attributes
- 3
Check the conversion rules
Refer to the conversion rules table below to understand each transformation applied to your HTML
- 4
Copy to your React component
Click the copy button to copy the JSX output and paste it into your React component file
Frequently Asked Questions
- What does HTML to JSX conversion change?
- The main conversions are: class becomes className, for becomes htmlFor, inline style strings become JavaScript objects with camelCase properties, HTML comments become JSX comments {/* */}, void elements like <img> and <br> get self-closing slashes, and event handlers become camelCase (onclick to onClick).
- Why does React use className instead of class?
- In JavaScript, "class" is a reserved keyword used to define classes. Since JSX is a JavaScript extension, React uses className to avoid conflicts. Similarly, "for" is used for loops, so React uses htmlFor for label elements.
- How are inline styles converted to JSX?
- HTML inline styles like style="color: red; font-size: 16px" become JSX style objects: style={{ color: 'red', fontSize: '16px' }}. CSS property names are converted from kebab-case to camelCase, and values become strings (or numbers for unitless values).
- Does this converter handle SVG attributes?
- Yes. SVG attributes with hyphens are converted to camelCase: stroke-width becomes strokeWidth, fill-opacity becomes fillOpacity, clip-path becomes clipPath, xlink:href becomes xlinkHref, and so on. This follows React's SVG attribute naming convention.
- What about self-closing HTML tags?
- In HTML, void elements like <img>, <br>, <input>, <hr>, <meta>, and <link> don't need closing tags. In JSX, all elements must be explicitly closed. The converter adds self-closing slashes: <img src="x"> becomes <img src="x" />.
- How are boolean attributes converted?
- HTML boolean attributes like disabled="disabled" or checked="true" are simplified to just the attribute name in JSX: disabled, checked. JSX treats standalone boolean attributes as true by default, which is cleaner and more idiomatic.