Which attributes get renamed?

class becomes className and for becomes htmlFor. Others such as tabindex, colspan, maxlength, readonly, charset and srcset are camel-cased, handlers like onclick become onClick, and data- and aria- attributes are left alone.

What happens to inline styles?

The declaration list becomes an object with camelCased property names and quoted string values, so margin-top: 8px turns into marginTop: "8px". Custom properties that start with two dashes are kept as quoted keys.

Are event handler strings turned into functions?

No. onclick="save()" only has its name changed to onClick and the value stays a string, which React will not run. Replace it with a real function reference yourself.

Why do I get a mismatched tags error?

JSX is strict about nesting, so every open tag is tracked. A closing tag that does not match the most recent opening one produces an error naming both. Void elements such as img, br and input are closed automatically.

How are script and style blocks treated?

Their contents are wrapped in a template literal expression so braces inside do not break the JSX. A doctype line is dropped entirely because JSX has no equivalent for it.

Developer toolsInstantPrivateNo account

HTML to JSX Converter

Converts an HTML snippet into JSX that can be pasted into a React component.

Back to category

About HTML to JSX

Converts an HTML snippet into JSX that can be pasted into a React component. It renames the attributes React spells differently, turns inline style strings into objects, rewrites comments and closes void elements. The input is handled as text and turned into code, so it is never rendered on the page.

How to use it

Paste your HTML into the HTML input box, or press Load sample for a card layout that includes a comment and an inline style.
Choose an Indent size of 2, 4 or 8 spaces.
If the markup has more than one top-level element, switch on Wrap in a fragment. A notice tells you when that is needed.
Read the converted code in the JSX output box.
Press Copy, or Download to save converted.jsx.

Attributes on a form label

Input

class="lbl" for="email" style="margin-top: 8px; background-color: #eee"

Output

className="lbl" htmlFor="email" style={{ marginTop: "8px", backgroundColor: "#eee" }}

When to use it

Porting a static landing-page section from a template into a React or Next.js component.
Pasting a snippet from a design handoff or an email builder and getting valid attribute names.
Converting documentation examples that use class and for so that they type-check as JSX.
Seeing at a glance how CSS declarations become camelCased style objects.

Good to know. Numeric-looking values such as tabindex="2" stay string attributes, giving tabIndex="2". React accepts that, but TypeScript expects a number, so change it to tabIndex={2} if the compiler objects. Literal curly braces in text are wrapped as string expressions.

Questions about HTML to JSX

Which attributes get renamed?: class becomes className and for becomes htmlFor. Others such as tabindex, colspan, maxlength, readonly, charset and srcset are camel-cased, handlers like onclick become onClick, and data- and aria- attributes are left alone.
What happens to inline styles?: The declaration list becomes an object with camelCased property names and quoted string values, so margin-top: 8px turns into marginTop: "8px". Custom properties that start with two dashes are kept as quoted keys.
Are event handler strings turned into functions?: No. onclick="save()" only has its name changed to onClick and the value stays a string, which React will not run. Replace it with a real function reference yourself.
Why do I get a mismatched tags error?: JSX is strict about nesting, so every open tag is tracked. A closing tag that does not match the most recent opening one produces an error naming both. Void elements such as img, br and input are closed automatically.
How are script and style blocks treated?: Their contents are wrapped in a template literal expression so braces inside do not break the JSX. A doctype line is dropped entirely because JSX has no equivalent for it.

Related tools

Developer toolsInstantPrivateNo account

HTML to JSX Converter

Converts an HTML snippet into JSX that can be pasted into a React component.

Back to category

WorkbenchClient-side · Private

About HTML to JSX

How to use it

Paste your HTML into the HTML input box, or press Load sample for a card layout that includes a comment and an inline style.
Choose an Indent size of 2, 4 or 8 spaces.
If the markup has more than one top-level element, switch on Wrap in a fragment. A notice tells you when that is needed.
Read the converted code in the JSX output box.
Press Copy, or Download to save converted.jsx.

Attributes on a form label

Input

class="lbl" for="email" style="margin-top: 8px; background-color: #eee"

Output

className="lbl" htmlFor="email" style={{ marginTop: "8px", backgroundColor: "#eee" }}

When to use it

Porting a static landing-page section from a template into a React or Next.js component.
Pasting a snippet from a design handoff or an email builder and getting valid attribute names.
Converting documentation examples that use class and for so that they type-check as JSX.
Seeing at a glance how CSS declarations become camelCased style objects.

Questions about HTML to JSX

Which attributes get renamed?: class becomes className and for becomes htmlFor. Others such as tabindex, colspan, maxlength, readonly, charset and srcset are camel-cased, handlers like onclick become onClick, and data- and aria- attributes are left alone.
What happens to inline styles?: The declaration list becomes an object with camelCased property names and quoted string values, so margin-top: 8px turns into marginTop: "8px". Custom properties that start with two dashes are kept as quoted keys.
Are event handler strings turned into functions?: No. onclick="save()" only has its name changed to onClick and the value stays a string, which React will not run. Replace it with a real function reference yourself.
Why do I get a mismatched tags error?: JSX is strict about nesting, so every open tag is tracked. A closing tag that does not match the most recent opening one produces an error naming both. Void elements such as img, br and input are closed automatically.
How are script and style blocks treated?: Their contents are wrapped in a template literal expression so braces inside do not break the JSX. A doctype line is dropped entirely because JSX has no equivalent for it.

Related tools

WorkbenchClient-side · Private

Wrap in a fragment

JSX output

Your markup is converted to code text only — it is never rendered as HTML.

{/* Pricing card */}
<div className="card" style={{ padding: "16px", borderRadius: "8px", backgroundColor: "#fff" }}>
  <img src="/logo.svg" alt="Logo" width="48" height="48" />
  <h2 className="card-title">
    Pro plan
  </h2>
  <p>
    Everything in Free, plus unlimited exports.
  </p>
  <label htmlFor="seats">
    Seats
  </label>
  <input id="seats" type="number" value="3" required disabled />
  <button className="btn btn-primary" tabIndex="0" onClick="subscribe()">
    Subscribe
  </button>
</div>

17 lines

What gets converted

Attribute renames, style objects, comments and self-closing tags.

class: className
for: htmlFor
tabindex: tabIndex
stroke-width: strokeWidth
style="…": style={{ … }}
: {/* … */}
<br>: <br />
onclick: onClick

Wrap in a fragment

JSX output

Your markup is converted to code text only — it is never rendered as HTML.

{/* Pricing card */}
<div className="card" style={{ padding: "16px", borderRadius: "8px", backgroundColor: "#fff" }}>
  <img src="/logo.svg" alt="Logo" width="48" height="48" />
  <h2 className="card-title">
    Pro plan
  </h2>
  <p>
    Everything in Free, plus unlimited exports.
  </p>
  <label htmlFor="seats">
    Seats
  </label>
  <input id="seats" type="number" value="3" required disabled />
  <button className="btn btn-primary" tabIndex="0" onClick="subscribe()">
    Subscribe
  </button>
</div>

17 lines

What gets converted

Attribute renames, style objects, comments and self-closing tags.

class: className
for: htmlFor
tabindex: tabIndex
stroke-width: strokeWidth
style="…": style={{ … }}
: {/* … */}
<br>: <br />
onclick: onClick

Search tools

HTML to JSX Converter

About HTML to JSX

How to use it

Attributes on a form label

When to use it

Questions about HTML to JSX

Which attributes get renamed?

What happens to inline styles?

Are event handler strings turned into functions?

Why do I get a mismatched tags error?

How are script and style blocks treated?

Related tools

HTML to JSX Converter

About HTML to JSX

How to use it

Attributes on a form label

When to use it

Questions about HTML to JSX

Which attributes get renamed?

What happens to inline styles?

Are event handler strings turned into functions?

Why do I get a mismatched tags error?

How are script and style blocks treated?

Related tools