HTML to JSX Converter

About this tool

Paste a piece of HTML and the tool writes it as JSX. It renames attributes (class becomes className, for becomes htmlFor, tabindex becomes tabIndex, and so on for the others), changes style="color: red; margin-top: 4px" into style={{ color: "red", marginTop: "4px" }}, closes tags such as <br> and <img>, turns HTML comments into JSX comments, escapes curly braces in text, and wraps several top-level elements in a fragment. Form fields get defaultValue and defaultChecked, so they stay editable in React. Inline event handlers such as onclick="..." are removed with a note, because React needs functions and not strings. Tick Wrap in a component to get a ready function. We tested it by converting 15 pieces of HTML and SVG, compiling the JSX and rendering it with React, and comparing the result with the original markup: they matched in every case. A converter cannot know your intent: check text that depends on exact white space, and move scripts and handlers into your component. Everything is processed in your browser and nothing is uploaded.

How to use it

1. Paste your HTML.
2. Tick Wrap in a component if you want a complete function and enter its name.
3. Copy the JSX into your component.
4. Read the notes at the end: they list what was removed.

Common problems

My onclick was removed

React event handlers are functions. Add an onClick prop in your component that calls your code.

The text lost a space

JSX removes white space at line breaks. Text with other elements is kept on one line to preserve spaces; if you reformat, use {' '} where a space must stay.

A script tag did nothing

React does not run script tags in JSX. Load the script in your page or use an effect in your component.