HTML → JSX

Convert HTML to JSX/React. Transforms class→className, for→htmlFor, inline styles to objects, event handlers, self-closing tags, and boolean attributes.

HTML input

JSX output

<div className="container">
  <h1>Hello World</h1>
  <label htmlFor="name">Name:</label>
  <input type="text" id="name" className="input" autoFocus readOnly tabIndex="1" />
  <img src="photo.jpg" alt="A photo" />
  <br />
  <p style={{ color: "red", fontSize: "16px", marginTop: "10px" }}>
    Styled paragraph
  </p>
  <button onClick={() => { alert('hello') }} className="btn">Click me</button>
  {/*  This is a comment  */}
  <hr />
  <select>
    <option value="1" selected>One</option>
    <option value="2" disabled>Two</option>
  </select>
</div>

Was this page helpful?

HTML → JSX

Related tools