HTML to JSX Converter
Convert HTML into valid JSX: className, htmlFor, style objects, self-closing tags and escaped braces.
JSX output
Paste HTML above to see the JSX instantly.
Translation notes
How it works
Paste HTML and this converter parses it with the browser's own
WHATWG HTML parser
(via a <template> element, so table rows and cells survive as fragments), then
walks the resulting DOM and prints it back out as JSX. Attributes are renamed to their React DOM
property names — class becomes className, for becomes
htmlFor, tabindex becomes tabIndex, colspan
becomes colSpan — hyphenated SVG attributes such as stroke-width are
camel-cased to strokeWidth while viewBox keeps its casing,
data-* and aria-* attributes are left exactly as they are, and
xlink:href becomes xlinkHref. Void elements (br,
img, input, hr…) are self-closed, comments become
{/* … */}, stray { and } in text are escaped, and an
inline style="color:red" string is turned into a real
style={{ color: 'red' }} object with camel-cased properties (vendor prefixes follow
React's rules: -webkit- becomes Webkit, -ms- becomes
ms, and CSS custom properties keep their --name).
This is a best-effort translator, not a React compiler. Two things are genuinely approximate and
the page tells you when they happen: inline onclick="…" handlers are wrapped as
onClick={() => { … }} with your original code untouched inside, which almost
never resolves correctly in a component's scope, and full documents lose their
<html>, <head> and <body> wrappers because a
fragment parser drops them. Malformed markup is silently repaired by the parser the same way a
browser would repair it, so the JSX you get back is the DOM the browser saw, not a literal
transcription of your input. Everything runs in JavaScript on your device: no upload, no server,
no build step.
Frequently asked questions
How do I convert HTML to JSX?
Paste your HTML into the input box and the JSX appears instantly below it. Pick 2-space, 4-space or tab indentation, optionally wrap the result in an export default function component with your own name, then use Copy JSX or Download .jsx. Nothing to install, no account needed.
What exactly does the converter change?
It renames attributes to their React DOM names (class becomes className, for becomes htmlFor, tabindex becomes tabIndex, colspan becomes colSpan), camel-cases hyphenated SVG attributes such as stroke-width while leaving viewBox, data-* and aria-* alone, self-closes void elements like br and img, turns comments into JSX comments, escapes stray curly braces in text, and converts an inline style string into a real style object with camel-cased properties.
Which parts of the translation are approximate?
Two, and the page lists them in a Translation notes panel whenever they apply. Inline onclick handlers are wrapped as arrow functions with your original code inside, which rarely resolves in a component scope, and full documents lose their html, head and body wrappers because a fragment parser drops them. Malformed markup is repaired by the browser parser exactly as a browser would repair it, so you get the DOM the browser saw rather than a literal transcription.