Convert HTML to JSX for React in one paste
This HTML to JSX converter turns markup copied from a template, a design tool, an email or an old page into JSX you can drop straight into a React component. It renames attributes (class → className, for → htmlFor, tabindex → tabIndex), turns inline style strings into style objects, closes void tags such as <br /> and <img />, camel-cases SVG attributes, and rewrites HTML comments as {/* … */}.
Unlike a find-and-replace, it reads the HTML with your browser’s own parser, so entities, unclosed tags, table fragments and inline SVG are understood exactly the way a browser understands them. Anything that still needs a human — inline scripts, !important, javascript: links — is listed under the output.
The conversion happens on your device; your markup is never uploaded.
How to use the HTML to JSX Converter
- Paste HTML into the HTML box, or press Load file for an
.htmlor.svgfile. A sample signup card is loaded to show what changes. - Read the converted code in JSX; it updates as you type.
- Choose Output: bare JSX, or a ready-made function or arrow component with the Component name you type.
- Pick 2 or 4 space indentation, what to do with inline event handlers, and whether to keep comments and use uncontrolled form values.
- Check the notes under the output, then press Copy JSX or Download .jsx.
HTML to JSX Converter features
Every React attribute rename
Uses React DOM’s list of standard prop names: className, htmlFor, readOnly, maxLength, colSpan, srcSet, crossOrigin, httpEquiv and dozens more. data-* and aria-* stay as they are.
Style strings to objects
style="font-size:14px; z-index:3" becomes style={{ fontSize: '14px', zIndex: 3 }}. Custom properties keep their --name, vendor prefixes become WebkitTransition or msTransform, and unitless properties get real numbers.
SVG ready for React
stroke-width, fill-opacity, clip-path and xlink:href become strokeWidth, fillOpacity, clipPath and xlinkHref, while viewBox and linearGradient keep their case.
Valid JSX text
Characters JSX treats specially — {, }, <, > — are escaped, spaces between inline elements survive as {' '}, and <pre> content keeps its exact whitespace in a template literal.
Forms that do not freeze
value and checked become defaultValue and defaultChecked, <textarea> content moves into defaultValue, and selected options become the select’s defaultValue, so React does not create read-only controlled fields.
Event handlers converted
onclick="save()" becomes onClick={() => { save(); }}; this becomes event.currentTarget; return validate() becomes a preventDefault() check.
HTML to JSX: what changes and why
| HTML | JSX | Reason |
|---|---|---|
class="btn" | className="btn" | class is a reserved word in JavaScript |
for="email" | htmlFor="email" | for is a reserved word too |
<br>, <img …> | <br />, <img … /> | JSX requires every element to be closed |
style="color: red" | style={{ color: 'red' }} | React takes a style object, not a CSS string |
tabindex="0" | tabIndex={0} | React props are camelCase; numbers can be numbers |
disabled="disabled" | disabled | boolean props are true when present |
<!-- note --> | {/* note */} | JSX has no HTML comments |
| Two sibling elements | <> … </> | a component returns one root, so siblings get a fragment |
Things to check after converting
- Inline scripts do not run when React renders them in the browser. Move the code into a module or a
useEffect. - !important cannot be expressed in a React style object, so it is dropped with a note; keep such rules in CSS.
- Framework attributes from Vue or Alpine (
@click,:class,x-on:click) are not valid JSX names. They are kept in a{...{ }}spread so nothing is lost, but they will not do anything in React. - Whitespace between block elements is dropped, as JSX does. Between inline elements such as links and buttons it is kept with
{' '}. - Repeated style properties used as fallbacks keep only the last value.
Related developer tools
Tidy the result with the TypeScript formatter (it formats JSX and TSX with Prettier), sort Tailwind utilities with the Tailwind class sorter, or check the original markup first with the HTML validator. To preview raw HTML, CSS and JavaScript together, use the HTML viewer.
HTML to JSX Converter FAQ
How do I convert HTML to JSX?
Paste the HTML into the HTML to JSX converter and copy the JSX. Attributes are renamed, styles become objects, void tags are closed and comments become JSX comments; the notes list anything you still need to change by hand.
Can it make a full React component?
Yes. Set Output to “Function component” or “Arrow component” and type a name; the JSX is wrapped in an exported component that returns it.
Does it convert SVG to JSX?
Yes. Paste the SVG markup; hyphenated and namespaced attributes become camelCase React props, and case-sensitive names such as viewBox stay correct.
Why does value become defaultValue?
In React, value without an onChange handler makes a read-only controlled input. defaultValue sets the starting value and lets the user type. Untick “Uncontrolled form values” if you plan to manage the state yourself.
What happens to onclick and other inline handlers?
They become arrow functions such as onClick={() => { save(); }}, or are removed if you choose Remove. Check that the functions they call exist in your component.
Does it work for TypeScript (TSX)?
Yes. The output is plain JSX, which is also valid TSX.
Is my HTML uploaded?
No. The converter uses your browser’s built-in HTML parser in an inert template, so nothing is sent anywhere and no script in the markup runs.