HTML to React JSX Converter
Converts HTML markup to React JSX with htmltojsx: class becomes className, for becomes htmlFor, inline styles become style objects and void tags are self-closed. Several root elements are wrapped in a fragment.
Moving a static HTML template or form into a React component.
HTML
JSX
When to use it
- Moving a static HTML template or form into a React component.
- Converting a markup snippet from documentation or a UI kit into JSX you can paste into a component.
How to use
- Paste HTML into the left editor.
- Optionally open settings and turn on Create function component to wrap the output in export const Foo = () => (...).
- Copy the JSX, rename the component and replace inline event attributes with React handlers.
HTML
<label class="field" for="email">Email</label> <input id="email" type="email" tabindex="1" style="margin-top: 4px; font-size: 14px" disabled> <!-- hint -->
JSX
<>
<label className="field" htmlFor="email">
Email
</label>
<input
id="email"
type="email"
tabIndex={1}
style={{ marginTop: 4, fontSize: 14 }}
disabled=""
/>
{/* hint */}
</>Details and limitations
Conversion runs in the browser and output is formatted with Prettier (no semicolons).
Inline event attributes like onclick="go()" are kept as-is, not converted to onClick handlers.
Boolean attributes get an empty string, e.g. disabled="". React treats "" as false, so change it to disabled or disabled={true}.
If the input is SVG, the page shows a hint pointing to SVG to JSX.
FAQ
How are inline styles converted?
The style string is parsed into an object with camelCase keys, and pixel values become numbers: style="margin-top: 4px" becomes style={{ marginTop: 4 }}.
What happens to HTML comments?
They are kept as JSX comments, e.g. <!-- hint --> becomes {/* hint */}.
Can I name the generated component?
No. The function option always uses the name Foo. Rename it after copying.