HTML to JSX Converter
The HTML to JSX Converter turns pasted markup into JSX that compiles.
100% in-browser · no data sent
It renames the attributes JSX spells differently, turns the style string into a style object, self-closes void elements, escapes the characters JSX would read as code, and tells you about the one thing it cannot carry across — an inline onclick handler, which is a string in HTML and a function in JSX.
Embed This Tool
Add this tool to your website with customizable styling
How to Use
Paste your HTML
A whole page, a component, an SVG icon or a single tag all work. Missing closing tags on list items and table cells are filled in the way a browser fills them in.
Choose React or Preact
React needs className and htmlFor. Preact accepts class and for, so choosing Preact leaves them as they are instead of renaming them for no reason.
Set the output shape
Pick two or four space indentation, optionally wrap the result in an exported component function, and choose whether an empty element should self-close.
Copy the JSX
Copy it straight into a component, or download it as a .jsx file. Read the notes first if any appear — they list what could not be converted.
Frequently Asked Questions
Why does my onclick handler disappear?
In HTML, onclick="save()" is a string the browser evaluates. In JSX, onClick takes a function reference. There is no honest automatic conversion between the two, so the converter removes the attribute and lists it in the notes rather than emitting code that looks right and does nothing. Add the handler yourself: onClick={save}.
What happens to the style attribute?
A CSS string becomes a JavaScript object with camelCased property names, so style="background-color: red" becomes style={{ backgroundColor: 'red' }}. CSS custom properties keep their exact name and are quoted, because --brand is not a valid identifier. Semicolons inside url() and data URIs do not split the declaration.
Does it handle SVG?
Yes, and this is where most hand-written converters break. Hyphenated presentation attributes become camelCase (stroke-width becomes strokeWidth), and attributes that are genuinely camelCase in the SVG spec have their casing restored — HTML parsing lowercases everything, so viewBox arrives as viewbox and would silently render an icon with no viewBox.
Is my HTML sent anywhere?
No. The parser and the serializer both run in your browser, in JavaScript, with no network request at any point. You can convert markup from an internal admin page or an unreleased design without it leaving the machine.