HTML to JSX Converter
Convert HTML markup to valid React JSX code instantly
HTML Input
JSX Output
What Is an HTML to JSX Converter?
An HTML to JSX converter transforms standard HTML markup into valid React JSX syntax. JSX is a JavaScript XML extension used in React applications that looks like HTML but has key differences: HTML attributes must be camelCase, class becomes className, for becomes htmlFor, and all void elements must be self-closed.
When building React components, pasting raw HTML directly causes syntax errors. This tool automates all the required transformations — renaming attributes, converting event handlers like onclick to onClick, and adding self-closing slashes to tags like <br /> and <img /> — so you can copy HTML from any webpage or template and drop it straight into your React component.
How to Convert HTML to JSX
Follow these three steps to convert HTML into valid React JSX.
Paste or Upload HTML
Paste your HTML into the left HTML Input panel, or click Upload to load an HTML file. Click Sample to try an example.
View JSX Output
The right JSX Output panel shows the converted JSX as you type. class is renamed to className, for to htmlFor, inline event handlers become camelCase, and void elements gain self-closing slashes.
Copy or Download
Click Copy to copy the JSX to your clipboard, or click Download to save it as a .jsx file. Paste it directly into your React component.
When to Use an HTML to JSX Converter
Migrating Static HTML to React
Converting an existing static website to a React application requires transforming all HTML templates into JSX. This tool handles all the attribute renames and self-closing tag requirements automatically.
Using Designer Mockups in React
Designers often deliver HTML mockups that need to be integrated into React components. Convert them in one step instead of manually hunting for every <code>class</code> attribute.
Learning JSX Syntax
New React developers can paste any HTML they already know and immediately see the equivalent JSX — a practical way to learn the differences between HTML and JSX.
Converting Email Templates to React Email
Libraries like React Email require JSX. Converting HTML email templates is tedious without a tool — this converter handles the bulk of the transformation automatically.
Common Questions
Why does class become className in JSX?
In JSX, attributes map to JavaScript DOM properties rather than HTML attribute names. The DOM property for the HTML class attribute is className, because class is a reserved keyword in JavaScript. See the React JSX rules for details.
What other attributes are renamed?
Common renames include: class → className, for → htmlFor, tabindex → tabIndex, colspan → colSpan, rowspan → rowSpan, maxlength → maxLength. Event handlers like onclick → onClick.
Which void elements are self-closed?
All HTML void elements are self-closed in JSX: <area />, <base />, <br />, <col />, <embed />, <hr />, <img />, <input />, <link />, <meta />, <param />, <source />, <track />, <wbr />.
Does it handle inline styles?
Inline style strings (style="color:red") are converted to JSX style objects (style={{ color: "red" }}). Property names are camelCased to match the JavaScript DOM style API.
Is my HTML stored anywhere?
No. All conversion happens locally in your browser using JavaScript. Your HTML is never sent to any server.
Related HTML & React Tools
More tools for working with HTML and converting it to other formats: