HTML to JSX
Convert HTML or SVG markup to JSX for React.
Runs on your machine. Nothing you paste is uploaded.
Get HTML to JSX and 121 other tools. Free for 7 days, no account needed.
What it does
Paste HTML or inline SVG and get JSX you can drop into a React component. class becomes className, for becomes htmlFor, inline styles become style objects, void tags are self-closed, and SVG attributes like stroke-width are camel-cased.
Text is escaped where JSX would read it differently: braces, angle brackets and entity-like text such as ©. Wherever HTML would show a space between words and an inline element, the output writes {" "} so nothing runs together. Form fields get defaultValue and defaultChecked, and you can wrap the result in a named component.
When you would reach for it
- Move a block of markup from a static template or design mockup into a React component.
- Turn an icon's SVG from a design tool into JSX without fixing every attribute by hand.
- Convert an email or landing page snippet for a Next.js page.
- Check how a tricky piece of HTML, with inline styles and entities, should be written in JSX.
Also found by searching
- html
- jsx
- react
- convert
- classname
- svg
- component