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

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.
Yes. Inline style strings like style="color: red; font-size: 14px" are converted to JSX style objects like style={{ color: "red", fontSize: "14px" }}.
Yes — the JSX output updates automatically as you type or paste your HTML, with no need to click a button.
Yes. Common SVG attributes with hyphens (stroke-width, fill-opacity, etc.) are converted to their camelCase JSX equivalents.
HTML comments (<!-- ... -->) are converted to JSX comment syntax ({/* ... */}).