{/* A small card */}
<div className="card" style={{ padding: '12px', borderRadius: '8px' }}>
<label htmlFor="name">Name</label>
<input id="name" type="text" autoComplete="off" tabIndex="0" />
<br />
<a href="/docs" target="_blank">Read the docs</a>
</div>About HTML to JSX Converter — Convert HTML to React
JSX looks almost like HTML, but the two aren't interchangeable. React reserves `class` and `for` as JavaScript keywords, so markup uses `className` and `htmlFor` instead; inline styles must be objects rather than strings; many attributes are camelCased; and every void tag like `<br>` or `<img>` has to be explicitly self-closed. Pasting raw HTML straight into a component is a fast way to collect red squiggles.
This free HTML to JSX converter does the rewrites for you. Paste a snippet of HTML and it returns valid React JSX — `class`→`className`, `for`→`htmlFor`, `style="color:red"`→`style={{ color: 'red' }}`, camelCased attributes and event handlers, self-closed void elements, and HTML comments turned into `{/* ... */}`.
Everything runs locally in your browser. Nothing you paste is uploaded, so it's safe for proprietary markup.
Features
- Renames class → className and for → htmlFor
- Converts inline style strings into JSX style objects
- Self-closes void elements (<br>, <img>, <input>) and camelCases attributes
- Turns HTML comments into JSX comments; runs fully offline
How to use
- Paste your HTML into the input pane.
- The converted JSX appears live in the output pane.
- Copy the result and drop it straight into your React component.
Frequently asked questions
Why can’t I use class and for in JSX?
JSX compiles to JavaScript, where `class` and `for` are reserved words. React maps the DOM properties `className` and `htmlFor` to the HTML `class` and `for` attributes, so JSX uses those names instead.
How are inline styles converted?
A `style="color:red; font-size:14px"` string becomes a JavaScript object: `style={{ color: 'red', fontSize: '14px' }}`. CSS property names are camelCased, and custom properties (--var) are preserved as quoted keys.
Does it handle self-closing tags?
Yes. HTML void elements such as `<br>`, `<img>`, `<input>`, and `<hr>` are emitted self-closed (`<br />`) because JSX requires every element to be closed.
Is my HTML sent to a server?
No. The conversion is pure JavaScript that runs entirely in your browser. Your markup never leaves your device, so it is safe for private or proprietary code.
Related tools
Everything runs locally in your browser — your input is never uploaded.