HTML to JSX Converter
This HTML to JSX converter handles the mechanical differences between markup and JSX: class becomes className, for becomes htmlFor, hyphenated attributes such as tabindex and cellpadding are camel-cased, void elements are self-closed, HTML comments become JSX comments, and literal braces in text are escaped so they are not read as expressions. Inline style strings become React style objects with camel-cased properties, custom properties quoted correctly. What cannot be converted mechanically is reported rather than guessed at: an inline onclick handler has no automatic React equivalent, and a style or script block has no place inside JSX at all. You can wrap the result in a component or take the bare fragment.
How it works
Converts markup into JSX React will accept: class becomes className, for becomes htmlFor, hyphenated attributes are camel-cased, void elements are self-closed, style strings become style objects and comments become JSX comments.
Anything that needs a human decision is reported rather than guessed at — inline event handlers cannot become React props mechanically, and a <style> or <script> block has no JSX equivalent.
Everything runs in your browser — nothing you paste is sent to a server.
How to convert HTML to JSX
- Paste your markup into the input on the left.
- Choose whether to wrap the result in a component, and name it.
- Copy the JSX, or download it as a
.jsxfile.
What changes, and why
JSX looks like HTML but is compiled to JavaScript, and a handful of names collide with reserved words or with the DOM property names React sets directly.
class→className, becauseclassis a reserved word.for→htmlFor, for the same reason.tabindex→tabIndex,colspan→colSpan, and so on — React uses the DOM's camel-cased property names.data-*andaria-*keep their hyphens, because React passes those through unchanged.- Void elements gain a slash:
<br>→<br />. Every JSX element must close. - Comments become
{/* … */}, since HTML comment syntax is not valid inside JSX.
Style attributes become objects
React expects style as an object, not a string. A declaration such as
background-color: #fff becomes backgroundColor: '#fff'. CSS custom properties are the
exception — --brand keeps its exact name and stays quoted, since camel-casing it would break the
variable lookup.
Braces in text are escaped
In JSX a brace opens an expression, so literal braces in your content must be written as
{'{'}. Any braces in text are escaped for you — without it, prose containing a template
placeholder would fail to compile.
What the tool refuses to guess
An inline onclick="doThing()" refers to a function on the page. There is no mechanical way to turn
that into a React prop, because the function has to exist inside your component. Those attributes are dropped and
reported rather than converted into something that would silently do nothing.
The same applies to <style> and <script> blocks. They are kept as-is and
flagged, because CSS and inline script have no JSX equivalent — the CSS belongs in a stylesheet or a CSS-in-JS
call, and the script belongs in component code.
Common use cases
- Porting a static template or landing page into a React project.
- Turning a design handoff into a component skeleton.
- Converting an email template or snippet for use in a React app.
Frequently asked questions
How do I convert HTML to JSX?
Paste your markup into the left panel. The JSX appears on the right, optionally wrapped in a component you can name.
Which attributes get renamed?
class becomes className, for becomes htmlFor, and hyphenated attributes such as tabindex, cellpadding, colspan and maxlength are camel-cased. data-* and aria-* attributes keep their hyphens, because React expects them that way.
What happens to inline styles?
A style string becomes a React style object with camel-cased properties, so style="background-color:#fff" becomes style={{ backgroundColor: "#fff" }}. CSS custom properties keep their exact names and stay quoted.
What about onclick and other inline handlers?
They are dropped and reported. An inline handler references a function in the page, which has no meaning in a component — you need to attach a real React prop such as onClick={handler} yourself.
Why are braces in my text escaped?
Braces are JSX syntax for embedding expressions, so literal ones have to be written as {"{"} to be shown as text. That escaping is applied automatically.
Is my markup sent anywhere?
No. The conversion runs entirely in your browser.
Related tools
HTML Formatter & Beautifier
This HTML formatter re-indents markup using a real parser, so nesting and inline elements are handled correctly.
HTML Cleaner
This HTML cleaner strips the junk out of markup pasted from Word, Docs or a WYSIWYG editor.
JavaScript Formatter & Beautifier
This JavaScript formatter reparses your code and prints it from the syntax tree, so the result is predictable.