HTML to JSX Converter
Convert HTML to JSX for React: class becomes className, for becomes htmlFor, inline styles become style objects, void elements self-close, comments become JSX comments and braces in text are escaped. Optionally wrap the result in a fragment or a component. The HTML is only read as text — never rendered or run.
This tool runs entirely in your browser.
How to use the HTML to JSX Converter
- 1Paste HTML — a snippet, a component’s markup or an SVG icon.
- 2Turn on “Wrap in a fragment” when there are several top-level elements, or “Wrap in a component” to get a ready-made function component.
- 3Copy the JSX and read the notes under it: they point out anything that needs a manual change, such as inline event handlers.
What is the HTML to JSX Converter?
JSX looks like HTML but follows JavaScript rules: attributes are camelCase (tabindex → tabIndex, stroke-width → strokeWidth), class and for are reserved words (className, htmlFor), style takes an object ({{ fontSize: '12px' }}), every element must be closed (<br />) and curly braces start a JavaScript expression, so literal { and } in text must be escaped.
The converter tokenizes the HTML and rewrites it without building a live DOM, so scripts and event handlers in the input are never executed. Inline handlers such as onclick="…" become empty arrow functions with the original code in a comment, and value/checked on form fields become defaultValue/defaultChecked so the fields stay editable. It covers everyday markup; unusual or invalid HTML may still need a manual touch.
In-depth guide
HTML to JSX: What Changes When You Move Markup into React →Frequently asked questions
What does the converter change?
Attribute names (class, for, tabindex, readonly, SVG attributes like stroke-width and xlink:href), inline style strings, void elements such as <br> and <img>, HTML comments, braces in text, and unclosed tags like <li> or <p>.
What happens to onclick and other inline handlers?
React handlers take functions, not strings, so onclick="go()" becomes onClick={() => { /* go() */ }}. Move the logic into a real handler in your component.
Is the output guaranteed to compile?
For typical HTML, yes, but it isn’t a full React compiler. Template syntax from other frameworks, broken markup or very unusual attributes may need edits.
Is the HTML to JSX Converter free and private?
Yes. The HTML to JSX Converter is free, needs no account, and runs entirely in your browser. What you type is never sent to a server or stored.