HTML to JSX Converter — Free Online Tool
Convert HTML to React JSX instantly. Handles className, htmlFor, self-closing tags, camelCase styles, and more — right in your browser.
HTML Input
JSX Output
What Is an HTML to JSX Converter?
Moving HTML from a design file or a CMS into a React component? That copy-paste almost never works cleanly. JSX has its own rules — class becomes className, for becomes htmlFor, void elements need a self-closing slash, and inline styles must be objects instead of strings. This tool handles all of that automatically. Paste your HTML and get back valid JSX you can drop straight into a component. The React JSX documentation covers the full spec if you want to understand why these differences exist.
The conversion runs entirely in your browser — no code is sent to a server. Under the hood it uses regex transforms for attribute renaming and self-closing void elements, plus a style-string-to-object converter that camelCases CSS property names the way React expects. For more complex transforms you can pipe through the Babel online playground. The full list of HTML attributes and how they differ in React is documented on MDN Web Docs.
How to Use This Tool
Paste your HTML
Paste any HTML snippet into the left editor. Click Sample to load a realistic example, or Upload to load from a file.
JSX is generated instantly
The right panel updates in real time as you type. Attributes are renamed, void elements are self-closed, and inline styles are converted to object syntax.
Copy or download the JSX
Click Copy to grab the JSX output, or Download to save it. To clean up messy HTML before converting, try the HTML Cleaner tool first.
Conversion Example
Here is what a typical HTML snippet looks like before conversion. Paste it in and see the JSX output on the right:
HTML input
When You Actually Need This
The most common use case is migrating a static HTML template into a React component. Designers hand off HTML, you need JSX — this bridges that gap in seconds. It's also useful when copying examples from documentation sites, Stack Overflow, or CodePen into a React project. The React createElement API is what JSX compiles to, and understanding the attribute mapping helps when you hit edge cases. For projects where you want to avoid JSX entirely, the htm library is a lightweight alternative worth knowing about.
If you need to inspect the rendered output of your JSX as HTML, try the HTML Viewer tool.
Frequently Asked Questions
Does this handle all JSX attribute differences?
It covers the most common ones: class→className, for→htmlFor, tabindex→tabIndex, readonly→readOnly, maxlength→maxLength, colspan→colSpan, rowspan→rowSpan, cellpadding→cellPadding, cellspacing→cellSpacing, and contenteditable→contentEditable. The full differences are listed in the React DOM components reference.
How does the inline style conversion work?
Style strings like style="color: red; font-size: 14px" are converted to React object syntax: style={{"{{"}}color: 'red', fontSize: '14px'{{"}}"}}. Hyphenated CSS properties are camelCased automatically.
Which elements get self-closed?
All HTML void elements: area, base, br, col, embed, hr, img, input, link, meta, param, source, track, and wbr.
Is my code sent to a server?
No. The entire conversion runs in your browser using JavaScript. Nothing is transmitted anywhere.
Can I use this for TSX files too?
Yes. The output is valid JSX which is also valid TSX. Just add your TypeScript types around it after pasting into your .tsx file.
Related Tools
The React JSX documentation explains the full set of differences between HTML and JSX. The MDN HTML attributes reference is useful for understanding the HTML side.