HTML to JSX Converter
Convert HTML to JSX — class to className, for to htmlFor, inline style strings to objects, void elements self-closed — using the browser's own HTML parser.
class → className, for → htmlFor, inline style → object, void tags self-close, comments → {/* */}.
Convert HTML to JSX
Paste plain HTML and get JSX you can drop straight into a React or Preact component. It renames attributes to their JSX equivalents (class→className, for→htmlFor, event handlers to camelCase), converts inline style strings into style objects, self-closes void elements like <img> and <br>, and turns HTML comments into {/* … */}.
The conversion parses your markup with the browser’s own HTML parser and walks the result — so it handles nesting correctly and runs entirely on your device with nothing uploaded.
Frequently asked questions
Does it keep data- and aria- attributes?
Yes. data-* and aria-* attributes are valid in JSX as-is and are passed through unchanged.
Why is there a {' '} in the output?
It is a space that would otherwise disappear. JSX drops the whitespace at each end of a line, so a space next to an inline element has to be written as an expression — without it, a sentence with a link in the middle comes out with the words welded together. The contents of a pre block and any non-breaking spaces are kept for the same reason.
What about multiple top-level elements?
If your HTML has more than one root element, the output is wrapped in a fragment (<>…</>) so it’s valid to return from a component.
Can the output be a ready-made component?
Yes. Tick “Wrap in a component”, give it a name, and the JSX comes out inside an exported function component; the download is named after it.
What happens to style and script blocks, and can I change the indent or the quotes?
They come through as code, not text. A stylesheet is written as a template literal exactly as it was, so it still reads like CSS, and a script as one JavaScript string, so neither has its braces escaped or its whitespace collapsed. Beside Wrap in a component, Indent chooses a number of spaces or a Tab and Attribute quotes chooses Double or Single; Indent starts at the fewest spaces and Attribute quotes at Double, and a wrapped component is indented the same way. An attribute value that contains the chosen quote mark is written as a string expression, so the JSX still parses.
Does it cope with upper-case tags, or attributes written without a value?
Yes. Tag and attribute names are read in lower case, so <DIV CLASS="a"> comes out as <div className="a">, and a yes-or-no attribute written bare, such as disabled or required, stays bare in the JSX — <input disabled> becomes <input disabled />.
What if my HTML is broken?
It is read by the browser’s own HTML parser, which repairs it the way a page would: an unclosed tag is closed, misnested formatting is rebuilt and a stray end tag is ignored. The JSX is converted from that repaired markup, and a note under it lists what the parser closed, added or ignored, with the line of the tag each one is about — where that tag is, not where the mistake was, which the parser cannot know. An element the parser made itself, such as an implied <tbody>, has no line.