HTML to JSX converter for React components

How to use HTML to JSX

1. Paste HTML into the HTML box. The sample is a small card with a label, an input, a button and an SVG.
2. Tick Wrap in a React component if you want a ready-made function, and type a Component name.
3. Copy the JSX or download it as Snippet.jsx.
4. Read any notes under the result. They tell you when the snippet has several top-level elements or when inline handlers were converted.

What it does and when to use it

Markup from a design tool, a template or an old page is valid HTML, but React rejects much of it: class, unclosed <br> tags, CSS strings in style, curly braces in text and HTML comments. Fixing these by hand is slow and easy to get wrong in a long snippet. Use this converter when you move a static page into React, Next.js or another JSX framework, or when you paste an SVG icon into a component.

Tidy the HTML first with the HTML Cleaner if it comes from Word or a page builder, and check it with the HTML Validator if the nesting looks wrong. A converter cannot fix a missing end tag for you.

How it works

The HTML is parsed in your browser and each element is written back as JSX:

• class → className, for → htmlFor, and other attributes get their React names.
• style="margin-top: 12px" → style={{ marginTop: "12px" }}; vendor prefixes become WebkitUserSelect and similar.
• Void elements such as img, input and br end in />.
• A { or } in text becomes {"{"} or {"}"}, so JSX does not read it as code.
• <!-- note --> becomes {/* note */}.

Worked examples

The sample card. The first line of the result is:

<div className="card" style={{ marginTop: "12px", backgroundColor: "#0b1220" }}>

The input becomes <input id="email" type="email" defaultValue="asha@example.com" tabIndex="1" readOnly />, the comment becomes {/* submit */}, and the text Save {draft} keeps its braces safely as Save {"{"}draft{"}"}.

Form state. <input type="checkbox" checked><textarea>Notes</textarea> becomes <input type="checkbox" defaultChecked /><textarea defaultValue="Notes" />, with a note that there are two top-level elements.

A component. A heading and a paragraph with onclick="go()", wrapped as PromoCard, give export default function PromoCard() { with both elements inside a fragment (<> … </>) and onClick={() => { go(); }}.

Limits and tips

• Component names are turned into PascalCase from the words you type, so “promo card” or “promo-card” becomes PromoCard. Other characters are dropped.
• Scripts are not rewritten as React logic. Move behaviour into event handlers or effects yourself.
• If the HTML is really content, such as a blog post, Markdown may be easier to keep in a React project than JSX. Convert it with HTML to Markdown.