HTML to JSX Converter

Convert HTML to React JSX — and JSX back to HTML.

A free two-way HTML to JSX converter: paste HTML and get clean, React-ready JSX — class becomes className, for becomes htmlFor, inline styles become style objects, every attribute and SVG prop is camelCased and tags are closed the JSX way. Convert JSX back to HTML too, and optionally wrap the result in a React component. Runs fully in your browser — nothing is uploaded.

How to use HTML to JSX Converter

  1. Choose a direction

    Select HTML to JSX or JSX to HTML in this free online HTML to JSX converter, or hit the swap button to flip the conversion either way.

  2. Paste your code

    Drop a snippet, a full markup block or an inline SVG into the input pane and the converted, React-ready code appears instantly on the right.

  3. Set component options

    For HTML to JSX, optionally wrap the output in a React component and give it a name so it is ready to import straight into your project.

  4. Review the output

    Check the converted JSX or HTML, where class becomes className, inline styles become style objects and every tag is closed the JSX way.

  5. Read the notes

    Scan the conversion notes that flag anything needing attention, like inline event handlers or dynamic JSX expressions that cannot be evaluated automatically.

  6. Copy or download

    Copy the result to your clipboard or download it as a .jsx or .html file, with every transformation running locally and nothing ever uploaded.

Frequently asked questions

How do I convert HTML to JSX?

Paste your HTML into the left pane with “HTML → JSX” selected and the converted JSX appears instantly on the right. It renames class to className and for to htmlFor, camelCases every attribute and SVG property, turns inline style strings into style objects, closes void tags (like <br> and <img>) and rewrites HTML comments to JSX comments. Copy the result or download it as a .jsx file.

Can it convert JSX back to HTML?

Yes. Switch to “JSX → HTML” (or hit the swap button) and paste JSX to get plain HTML back — className becomes class, style objects become style strings, and self-closing tags become valid HTML. Because JSX can contain JavaScript expressions, anything dynamic (like {count}) can’t be evaluated, so it’s left in place and flagged in the notes.

Does it handle inline styles?

It does. An attribute like style="color: red; font-size: 12px" is converted to a JSX style object — style={{ color: 'red', fontSize: '12px' }} — with every CSS property camelCased (and vendor prefixes and CSS custom properties handled correctly). The reverse direction turns the object back into a CSS string.

Does it work with SVG?

Yes. Inline SVG is fully supported: hyphenated presentation attributes like stroke-width, fill-rule and clip-path are camelCased, mixed-case attributes such as viewBox and preserveAspectRatio are preserved, and namespaced attributes like xlink:href become xlinkHref.

Can it wrap the result in a component?

Turn on “Wrap in a React component” for the HTML → JSX direction and give it a name. The converter emits a complete export default function MyComponent() { return ( … ); } — and if your HTML has several top-level elements it wraps them in a <>…</> fragment so the JSX is valid.

What happens to onclick and other inline event handlers?

Event attributes are renamed to their React names (onclick → onClick, onmouseover → onMouseOver, and so on). The handler is kept as a string and flagged in the notes, because in React an event handler should be a function — e.g. onClick={handleClick} — not a string of code.

Is my code uploaded anywhere?

No. The whole conversion runs in your browser with a small, dependency-free parser — your markup never leaves your device, so it’s safe for private or proprietary code. There’s no sign-up and no usage limit.

Related tools — Developer · React converters