HTML to JSX converter
Convert HTML to JSX with className, htmlFor, style objects, self-closing tags and comments handled for you. Free, no sign up, runs in the browser.
Converting...
- class becomes className, for becomes htmlFor
- style strings become objects
- Boolean attributes are written bare
- Void tags self-close, comments become {/* */}
- SVG attributes are camelCased
// Converting...
How to use it
- 1Paste a snippet or a whole page of HTML.
- 2Choose whether to wrap the result in a component and name it.
- 3Read the notes for anything that was changed or removed, such as inline event handlers.
- 4Copy the JSX into your React project.
Why HTML does not paste into React
JSX looks like HTML but it is JavaScript, so a few names and shapes differ. class and for are reserved words, so React uses className and htmlFor. Attributes are camelCased: tabindex becomes tabIndex and maxlength becomes maxLength. Every tag must close, so <img> and <br> become <img /> and <br />. Inline styles are objects rather than strings, and comments are written as {/* */}. The converter runs the markup through the browser's HTML parser, which also closes unclosed tags and inserts the <tbody> a table needs, then prints JSX with React's attribute names. Text is re-escaped on the way out, so &, and angle brackets survive unchanged.
Form fields and events
React treats value and checked as controlled state. Pass them without an onChange handler and the field freezes. The converter writes defaultValue and defaultChecked instead, so the output stays editable, and tells you when it did. Inline handlers such as onclick="..." cannot be turned into a function safely, so they are removed with a note; wire them up as props.
// <label for="seats">Seats</label>
// <input id="seats" type="number" value="5" required onclick="track()">
<label htmlFor="seats">Seats</label>
<input id="seats" type="number" defaultValue="5" required />
What to check afterwards
- SVG inside the HTML gets camelCased attributes too, but
<script>tags are dropped everywhere. <pre>and<style>keep their content as a string literal, because JSX collapses whitespace and reads curly braces as code.- A
selectedattribute on<option>works, but React prefersdefaultValueon the<select>. - Repeated markup is a hint to extract a component and map over data; a converter cannot see that for you.
Frequently asked questions
Does it handle whole pages?
Yes. If the markup contains html, head or body tags, the full document is converted. Head elements such as title and meta are kept, scripts are removed.
Why are inline event handlers removed?
An onclick string is code, and turning it into a function automatically would mean trusting and executing pasted text. The converter drops it and tells you, so you can attach a handler prop.
Is the output formatted?
Short inline content stays on one line and blocks are indented two spaces, close to Prettier's defaults. Run your formatter after pasting for an exact match.