HTML to JSX Converter

Paste HTML on the left and get React JSX on the right.

HTML Input

JSX Output

<div className="container" onClick="handleClick()">
  <label htmlFor="name">Name</label>
  <input type="text" id="name" tabIndex="1" readOnly />
  <img src="photo.jpg" alt="Photo" />
  <br />
  <p style={{ color: 'red', fontSize: '14px', backgroundColor: '#fff' }}>
    Hello World
  </p>
  {/* This is a comment */}
  <table>
    <tr>
      <td colSpan="2">Cell</td>
    </tr>
  </table>
</div>

Conversions applied:

class → className
for → htmlFor
tabindex → tabIndex
onclick → onClick
style="..." → style={{}}
Self-closing void tags
colspan → colSpan
readonly → readOnly
HTML comments → JSX comments