What attributes get renamed?

All the ones React renames: `class` / `for` / `tabindex` / `readonly` / `maxlength` / `contenteditable` / `spellcheck` / `autocomplete` / `autofocus` / `enctype` / `crossorigin` / `srcset` / `rowspan` / `colspan` / `usemap` / `datetime`, plus every `on…` event handler. `aria-` and `data-` attributes stay kebab-case.

What if my inline style has CSS variables?

Properties starting with `--` are quoted as string keys (`'--accent': 'blue'`) so they survive into the JSX. Vendor-prefixed properties like `-webkit-…` are also quoted.

Does it run my JavaScript or eval scripts?

No. The parser is a small hand-written scanner — ` ` tags pass through as text just like any other element. The conversion is purely string-level.

HTML → JSX Converter

Developer

Hand-rolled converter that rewrites the boring chores of porting HTML to a React component: attribute renames (`class`, `for`, `tabindex`, etc.), inline event-handler capitalization (`onclick → onClick`), self-closing of void tags (`<br>` → `<br />`), HTML comments to JSX comments, and optional conversion of `style="color: red; font-size: 14px"` to a `style={{ color: 'red', fontSize: '14px' }}` object literal.

—

Wrap in <> fragmentConvert style strings to objectsSelf-close void tags (<br />, <img />, …)

HTML

JSX

<>
  <div className="container">
    <label htmlFor="email">Email</label>
    <input type="email" id="email" required />
    <button onClick="submit()" tabIndex="0" style={{ color: '#fff', backgroundColor: 'rebeccapurple', fontSize: '14px' }}>
      Send
    </button>
    {/* footer */}
    <p className="muted">By signing up you agree to our <a href="/terms">terms</a>.</p>
  </div>
</>

Quoted string attribute values stay as strings; if you need a JS expression instead, change it in the JSX after copying.

How to use

Paste an HTML snippet.
Toggle the wrap-in-fragment option if you want a single root for a React component.
Copy the JSX into your component file.

Frequently asked questions

What attributes get renamed?: All the ones React renames: `class` / `for` / `tabindex` / `readonly` / `maxlength` / `contenteditable` / `spellcheck` / `autocomplete` / `autofocus` / `enctype` / `crossorigin` / `srcset` / `rowspan` / `colspan` / `usemap` / `datetime`, plus every `on…` event handler. `aria-` and `data-` attributes stay kebab-case.
What if my inline style has CSS variables?: Properties starting with `--` are quoted as string keys (`'--accent': 'blue'`) so they survive into the JSX. Vendor-prefixed properties like `-webkit-…` are also quoted.
Does it run my JavaScript or eval scripts?: No. The parser is a small hand-written scanner — `<script>` tags pass through as text just like any other element. The conversion is purely string-level.