HTML to JSX Converter

Paste HTML from a template, CodePen or design tool and get JSX you can drop into a React component.

Free
No sign-up
Runs in your browser

Wrap in a React component

HTML

JSX

<div className="card" style={{ padding: "16px", borderRadius: "8px" }}>
  {/* Profile */}
  <label htmlFor="email">Email</label>
  <input id="email" type="email" required tabIndex="1" />
  <button onClick={() => { /* save() */ }} className="btn primary">Save {"{"}changes{"}"}</button>
  <svg viewBox="0 0 24 24" strokeWidth="2">
    <path strokeLinecap="round" d="M5 12h14" />
  </svg>
</div>

Open file

class → className, for → htmlFor, inline styles → objects, SVG attributes camelCased

Everything you type is processed in your browser. Nothing you enter is sent to our servers or stored by us.

How to use the HTML to JSX Converter

Paste your HTML.
Optionally wrap it in a component.
Copy or download the JSX.

What does this tool do?

React needs a few changes from plain HTML: class becomes className, for becomes htmlFor, style strings become objects, void elements like <input> must self-close and curly braces in text must be escaped. Inline SVG attributes such as stroke-width become strokeWidth. Event handler attributes are turned into placeholder functions to fill in.

Everything runs in your browser — nothing you paste is uploaded.

Why use it?

Handles SVG and comments.
Escapes { } in text.
Optional component wrapper.

Privacy

Everything you type is processed in your browser. Nothing you enter is sent to our servers or stored by us. There's no account to create and nothing to install.

Last reviewed October 4, 2026 by the M2Toolkit team.

Other tools people use alongside the html to jsx converter.

How to use the HTML to JSX Converter

What does this tool do?

Why use it?

Privacy

Related tools