HTML to JSX

What it does

Paste raw HTML and get valid JSX in return. The converter handles every reserved-word rename React requires —class becomes className,for becomes htmlFor,tabindex becomes tabIndex — plus camelCases all the on-* event handlers (onclick →onClick) and re-formats inline styles from a CSS string into a JS object literal.

Self-closing tags get fixed: <img>, <br>, <hr>, <input> all become explicitly self-closed (<img />) so the JSX parser is happy. HTML comments (<!-- ... -->) become JSX comments {/* ... */}. boolean attributes that React expects to be JS booleans (checked, disabled, readonly) are wrapped in braces.

Use this when you've copied a snippet from a design tool, a CodePen, an old jQuery plugin, or any non-React project and need it to compile inside a .tsx file without chasing 30 individual rename errors.

How to use it

1. Paste the HTML snippet into the input box.
2. The JSX output regenerates live — no convert button needed.
3. Click Copy to grab the JSX, then paste into your React component's return statement.
4. Wrap multiple top-level elements in a fragment (<>...</>) since JSX requires a single root node.
5. If you see escaped braces ({` and `}) in your output, your input had literal curly braces — wrap them in {''} to keep them as text.

When to use this tool

• Migrating an old static site or jQuery template into React/Next.js.
• Pasting design-tool exports (Figma to code, Webflow exports) into a component.
• Converting Bootstrap/Tailwind HTML examples from documentation into JSX.
• Onboarding designers/non-React devs whose first instinct is to write plain HTML.

When not to use it

• Templating engines with custom syntax (Vue, Svelte, Handlebars) — those need their own converters.
• Server components with directives like "use client" — convert the markup here, but you still need to wire up the React-specific bits manually.
• Anything with <script> tags — React refuses to render <script> directly; use next/script or similar instead.