HTML to JSX Converter

Convert HTML to JSX in the browser. Rewrites class to className, for to htmlFor, inline styles to objects, event handlers to camelCase, and self-closes void elements. Free, private, runs in your browser.

Root wrapper

Function wrap

HTML input

JSX output

<div className="card" onClick={() => openCard()}>
  <img src="hero.png" alt="Hero image" />
  <h2 htmlFor="title" style={{ fontSize: '24px', color: '#333' }}>Welcome</h2>
  {/* Main content area */}
  <p tabIndex="0" aria-label="Intro text" data-testid="intro">
    Hello <strong>world</strong>
  </p>
  <input type="text" maxLength="100" readOnly={true} />
  <button disabled={true}>Submit</button>
</div>