HTML to JSX converter
Paste HTML and get JSX you can drop into a React component. Attributes are renamed, inline styles become objects, void tags are closed, comments become JSX comments and several root elements are wrapped in a fragment.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Paste HTML. A full page works, but a fragment is the usual case.
- Choose the indent, and whether to wrap the result in a component function.
- Copy the JSX into your component.
What changes
| HTML |
JSX |
class="a" |
className="a" |
for="x" |
htmlFor="x" |
style="color: red" |
style={{ color: 'red' }} |
<br> |
<br /> |
<!-- note --> |
{/* note */} |
onclick="go()" |
onClick={() => { go(); }} |
stroke-width="2" |
strokeWidth="2" |
Braces in text are written as { and }, since JSX would otherwise read them as expressions.
Tips
If the HTML has several top-level elements the result is wrapped in a fragment <>...</>, because a component can return only one root. Review the output once: dynamic parts such as lists and conditions still have to be written by hand.
Frequently asked questions
Which attributes are renamed?
class becomes className and for becomes htmlFor. Others that React spells in camelCase are converted too, such as tabindex, readonly, maxlength, colspan, rowspan, srcset, autocomplete, contenteditable and http-equiv. SVG attributes with hyphens, such as stroke-width, become strokeWidth, and xlink:href becomes xlinkHref. data-* and aria-* attributes stay as they are.
How are inline styles converted?
A style string becomes an object, with camelCase keys such as backgroundColor. Property names are camelCased, vendor prefixes become WebkitX or msX, custom properties like --gap stay quoted, and values become strings. A semicolon inside url(...) or quotes does not split a declaration.
What happens to onclick and other event attributes?
They become camelCase props whose value is an arrow function with the original code inside, for example onClick wrapped around send(). HTML handlers are code strings and React handlers are functions, so check that the code makes sense there, for instance that it does not rely on this or on global functions.
Does it change how the page behaves?
The structure is kept, but React treats some things differently at run time. An input with a value attribute becomes a controlled field and needs an onChange handler, or use defaultValue. Spaces between sibling inline tags that sit on separate lines are dropped by JSX. Text next to tags stays on one line, so words and tags keep their spaces.
Does it check that the HTML is valid?
No. It reads tags with a small tokenizer, closes omitted end tags of li, p, td, tr, option, dt and dd, and ignores a doctype. Content of pre, script and style is kept exactly, as a JavaScript string.