HTML to JSX Converter
Paste HTML — get React-ready JSX. Renames class/for, camelCases attributes, converts inline styles and self-closes void tags.
The HTML to JSX Converter transforms pasted HTML into React-ready JSX — renaming class to className and for to htmlFor, camelCasing attributes, converting inline style strings into style objects, and self-closing void tags. Paste markup from a template, Stack Overflow or a design tool and drop the JSX straight into a component.
- ✓class → className, for → htmlFor
- ✓Inline styles → style objects
- ✓Self-closes <br>, <img>, <input>…
- ✓100% private — runs in your browser
What Gets Converted
| HTML | JSX | Reason |
|---|---|---|
| class="box" | className="box" | class is reserved in JS |
| for="id" | htmlFor="id" | for is reserved in JS |
| style="color:red" | style={{ color: 'red' }} | JSX styles are objects |
| style="--main: red" | style={{ '--main': 'red' }} | custom properties keep their name |
| tabindex | tabIndex | JSX uses camelCase attributes |
| readonly | readOnly | JSX uses camelCase attributes |
| colspan="2" | colSpan="2" | JSX uses camelCase attributes |
| srcset="..." | srcSet="..." | JSX uses camelCase attributes |
| stroke-width="2" | strokeWidth="2" | SVG attributes are camelCased too |
| data-id / aria-label | data-id / aria-label | data-* and aria-* stay as-is |
| <br> | <br /> | JSX requires closed tags |
| <!-- note --> | {/* note */} | JSX comment syntax |
How to Convert HTML to JSX
- 1Paste HTML copied from a template, design tool or web page
- 2The converter renames attributes and rewrites inline styles instantly
- 3Review the JSX output in the right-hand panel
- 4Copy it into a React component's return statement
Features
Reserved word renaming
class → className and for → htmlFor, since both are reserved in JavaScript.
camelCase attributes
Hyphenated HTML attributes like tabindex and colspan become tabIndex and colSpan.
Inline styles → objects
style="padding:4px" becomes style={{ padding: '4px' }}, with CSS custom properties preserved as string keys.
Self-closing void tags
<br>, <img>, <input> and other void elements are automatically self-closed.
SVG attribute support
Presentation attributes like stroke-width and fill-rule are camelCased for JSX-rendered SVG.
data-* and aria-* preserved
Accessibility and data attributes are left exactly as written — React accepts them unchanged.
Who Uses This
- ▸Frontend developers — convert markup exported from Figma, Webflow or another design tool into a React component.
- ▸Developers migrating jQuery-era sites — port existing HTML templates into JSX component by component.
- ▸Anyone pasting from Stack Overflow — quickly convert an HTML snippet into valid JSX without manually renaming every attribute.
- ▸Email/marketing developers — turn HTML email templates into reusable React components for a design system.