HTML to JSX Converter

How to use

1. 1Paste your HTML on the left. The output panel updates as you type, and a sample is loaded by default so you can see the conversions immediately.
2. 2Adjust options if needed: wrap the result in a function component, change the component name, toggle script and style stripping, switch indent size between 2 and 4 spaces, and pick double or single quotes for attribute strings.
3. 3Review the warnings panel for any on* event handler attributes. The names are renamed to onClick, onChange, and so on, but the values stay strings until you replace them with real function references.
4. 4Click Copy JSX to put the output on your clipboard, then paste it into a .jsx or .tsx file.
5. 5Use Reset to defaults to restore the option panel, or Clear input to start fresh.

About this tool

HTML to JSX Converter rewrites raw HTML into JSX that React will accept without warnings. The conversion handles the long tail that catches developers off guard when porting examples from MDN, design tools, server templates, and marketing sites: class becomes className, for becomes htmlFor, hyphenated and underscored attribute names are camelCased (tabindex, colspan, accept-charset, crossorigin, srcset, contenteditable, formnovalidate, referrerpolicy, and many more), and SVG attributes such as clip-path, fill-rule, stroke-linecap, view-box, and the xlink:href family map to their React-friendly camelCase forms. Inline style strings are parsed and emitted as React style objects with camelCased CSS properties and quoted string values, so units stay correct and CSS custom properties pass through. Void elements like img, br, input, and hr always self-close, HTML comments turn into JSX comments, and on* event attributes are renamed to React handler props (onClick, onChange, onKeyDown) with a clear warning that the string values still need to be replaced by real function references. Multiple top-level elements are wrapped in a JSX fragment so the result is always a single React node, an optional toggle wraps the whole tree in an exported function component with a return statement, and indent size and attribute quotes can be configured to match your codebase. The tool runs entirely in the browser using DOMParser plus a tree walker that never injects parsed nodes into the live page, which makes it safe to paste markup that contains script tags. The output panel reports character count, line count, and any conversion notes, and a copy button puts the JSX straight onto your clipboard. Useful for porting code samples into React applications, cleaning up exports from no-code builders, converting design system snippets, building prototypes from Figma exports, and turning Tailwind UI or HTML email templates into JSX you can drop into a .tsx file.

Free to use. Works in your browser. No signup, no login.