HTML to JSX

How to use it

1. Paste HTML into the left panel — a whole snippet or a single element.
2. Type a Component name; it is turned into a PascalCase identifier for the wrapper function.
3. Keep Wrap in a component on to get a ready-to-paste function, or switch it off for bare JSX.
4. Keep Self-close empty tags on for <br /> style output; switch it off if your codebase prefers explicit pairs.
5. Press Convert, then Copy or Download the .jsx file.

Common use cases

• Porting a static template — move a landing page or email template into a React component without hand-fixing every attribute.
• Fixing attribute warnings — the rule table rewrites tabindex, readonly, maxlength, colspan, srcset and dozens more.
• Converting inline styles — style="padding: 16px; border-radius: 8px" becomes a real object with camelCased keys.
• Catching bad nesting early — mismatched close tags and block elements inside a paragraph are reported before they reach your build.

Why it stays private

Conversion is a local parse of the text you pasted. Nothing is uploaded, so unreleased markup and client templates stay on your machine.

FAQ

Q: Does it add key props inside loops? A: No. The converter works on markup, not on your data flow. Lists that become .map() calls still need keys added by hand.

Q: Why did my custom attribute stay lowercase? A: Attributes with a dash or a namespace prefix, such as data and aria attributes, are preserved exactly as written. Only known HTML attribute names are mapped to their JSX spelling.

Q: What counts as invalid nesting here? A: A closing tag that does not match the innermost open tag, a block element inside a paragraph, a nested anchor or form, and table or list children that are not allowed there. Each case reports the tag name instead of silently guessing.