Developer

HTML to JSX Converter

Convert HTML to React JSX — class to className, style strings to objects, self-closing tags, and camelCase attributes.

HTML

JSX

<div className="container" id="main">
  <h1 className="title" style={{ color: "red", fontSize: "24px" }}>Hello World</h1>
  <form action="/submit" onSubmit={handleSubmit(event)}>
    <label htmlFor="name">Name:</label>
    <input type="text" id="name" className="input-field" maxLength="50" readOnly />
    <input type="checkbox" defaultChecked />
    <button type="submit" disabled onClick={handleClick()}>Submit</button>
  </form>
  <img src="photo.jpg" alt="Photo" className="image" />
  <br />
  {/* This is a comment */}
  <table>
    <tr>
      <td colSpan="2" rowSpan="1">Cell</td>
    </tr>
  </table>
  <p tabIndex="0">Focusable paragraph</p>
</div>

Input Characters: 623Output Characters: 658

About HTML to JSX Converter

HTML to JSX Converter transforms HTML code into valid React JSX. It converts class to className, for to htmlFor, inline style strings to style objects, and normalizes self-closing tags and camelCase attributes.

Browse all Developer tools

How to Use

Paste your HTML into the left panel. The JSX output appears instantly on the right. Copy the result with the Copy button.

Common Use Cases

Migrating static HTML into React components
Converting design snippets to JSX
Fixing class to className and attribute casing automatically
Pasting markup into JSX without manual edits
Prototyping UI quickly from HTML mockups

How to Use HTML to JSX Converter Take a break and play free browser games

Reviews

Read & write tool reviews→

Discuss & review this tool→