HTML to JSX

What changes

• Attribute names: class → className, for → htmlFor, tabindex → tabIndex and the other camelCase names React uses. data-* and aria-* stay as they are.
• Styles: style="font-size: 12px" → style={{ fontSize: "12px" }}; vendor prefixes and custom properties (--accent) are handled.
• Form fields: value and checked become defaultValue and defaultChecked, so React treats the fields as uncontrolled instead of warning; a <textarea>'s text becomes its defaultValue.
• Tags and text: void tags such as <br> become <br />, comments become {/* … */}, and {, } and > in text are escaped. Several top-level elements are wrapped in a fragment <>…</>.
• Inline event handlers such as onclick="save()" can't be converted safely; they become empty functions with the original code in a comment.

How to use the HTML to JSX

1. Paste HTML, or press Sample.
2. Turn on Component to wrap it in a React component, and choose its name, props and TypeScript.
3. Read the notes for anything that needs attention.
4. Copy the JSX or download it.

Examples

<label for="email" class="label">Email</label><input id="email" type="email" value="ada@example.com" required style="margin-top: 4px">

<>
  <label htmlFor="email" className="label">
    Email
  </label>
  <input
    id="email"
    type="email"
    defaultValue="ada@example.com"
    required
    style={{ marginTop: "4px" }}
  />
</>

<section class="hero"><h1>Hello</h1><!-- CTA --><a href="/start" class="btn">Start</a></section>

export default function Hero() {
  return (
    <section className="hero">
      <h1>Hello</h1>
      {/* CTA */}
      <a href="/start" className="btn">
        Start
      </a>
    </section>
  );
}

Options

Component

Wrap the JSX in export default function <Name>() { return (…); }.

Spread props

Pass the component's props to its root element with {...props}.

TypeScript

Type the props as React.ComponentProps<"…"> for the root element.

Limitations

• Inline scripts are removed and inline event handlers emptied: move behaviour into React code.
• Template syntax (Handlebars, Liquid, Blade) isn't understood and is converted as text.

Frequently asked questions