HTML to JSX

Convert HTML to valid JSX instantly. Handles className, htmlFor, style objects, self-closing tags, and camelCase attributes.

259 characters
JSX Output
<div className="container">
  <h1 style={{ color: "red", fontSize: "24px" }}>Welcome</h1>
  <label htmlFor="email">Email:</label>
  <input type="email" tabIndex="1" autofocus />
  <img src="logo.png" alt="Logo" />
  <br />
  <button onClick="handleClick()">Submit</button>
</div>

Frequently Asked Questions

What does this tool convert?

It converts plain HTML to valid JSX syntax that you can paste into a React component. It handles class→className, for→htmlFor, inline style strings to style objects, self-closing tags, and more.

Does it handle inline styles?

Yes. Inline style strings like style="color: red; font-size: 14px" are converted to JSX style objects like style={{ color: "red", fontSize: "14px" }}.

Is the conversion real-time?

Yes — the JSX output updates automatically as you type or paste your HTML, with no need to click a button.

Does it handle SVG attributes?

Yes. Common SVG attributes with hyphens (stroke-width, fill-opacity, etc.) are converted to their camelCase JSX equivalents.

What about HTML comments?

HTML comments (<!-- ... -->) are converted to JSX comment syntax ({/* ... */}).