HTML to JSX
Paste HTML — get React-ready JSX with className, htmlFor, style objects, and form defaults. Nothing uploaded.
className · htmlFor · style objects · form defaultValue · strips script/style
DOMParser is not defined
Works offline in your browser. Good for Figma/HTML kits, emails, and docs — not a substitute for rewriting complex templates by hand.
How to convert HTML to JSX
- Paste an HTML fragment (or load the example).
- Choose JSX only, Fragment, or Component — set indent and optional TypeScript.
- Copy the JSX into your React / Next.js file.
- Replace any
on*stubs with real handlers.
Why teams still need HTML → JSX in 2026–2027
Design exports, CMS snippets, email templates, and legacy docs still arrive as HTML. React rejects class and for, wants camelCased SVG presentation attrs, and expects style as an object. Doing that by hand is slow and error-prone; AI chat is overkill for a deterministic rename pass. This converter also maps form value / checked to defaultValue / defaultChecked, lifts textarea and select selections the same way, and strips script / style with a warning. A private converter keeps markup on your machine and stays useful as long as React DOM keeps these rules — which it will.
Starting from an SVG icon? Use SVG to JSX or SVG to Tailwind. Need entities escaped first? Try the HTML Encoder / Decoder.
FAQ
What does HTML to JSX change?
It rewrites HTML for React: class → className, for → htmlFor, style strings → style objects, kebab-case attrs → camelCase, void tags self-close, and boolean attrs become JSX booleans. Form fields use defaultValue / defaultChecked so React does not treat them as controlled without onChange.
Is my HTML uploaded?
No. Parsing uses the browser DOMParser entirely on your device.
What about onclick and other handlers?
Names are camelCased (onclick → onClick) and replaced with empty function stubs plus a TODO comment of the original. Wire real React handlers yourself — executing pasted HTML handlers would be unsafe.
What happens to script and style tags?
They are removed and replaced with a short JSX comment, with a warning in the UI. Put scripts in modules/effects and CSS in stylesheets, CSS modules, or Tailwind.
How are textarea and select handled?
Textarea body text becomes defaultValue. Selected options become defaultValue on the select (or an array if several are selected). Option selected attributes are dropped.
Can I get a full React component?
Yes. Choose Component wrap, set a name, and optionally add a TypeScript return type. Multiple roots are wrapped in a fragment inside the return.
Does this replace SVG to JSX?
Use SVG to JSX / SVG to Tailwind when you start from SVG icons. Use this tool for general HTML fragments (cards, forms, emails, docs).