~/frontend-tools/html-to-jsx-converter
HTML to JSX Converter
Paste HTML and get JSX that React accepts: class becomes className, for becomes htmlFor, inline styles become objects, void elements self-close, attributes such as tabindex are camelCased, and comments become JSX comments.
Using the HTML to JSX Converter
What changes
JSX uses JavaScript property names, so reserved words and hyphenated attributes are renamed: class to className, for to htmlFor, tabindex to tabIndex, maxlength to maxLength, readonly to readOnly and so on. data- and aria- attributes are kept as they are.
Styles and void elements
Inline style strings become objects with camelCase keys, such as style={{ backgroundColor: '#5B8CFF' }}. Elements that cannot have children in HTML, like br, img and input, must self-close in JSX, so they get a closing slash.
Event handlers
Inline handlers such as onclick="..." are renamed to onClick, but in React they must be functions, not strings. The converter keeps the original code as a comment and lists every handler in the notes so you can rewrite them.
How it parses
The HTML is parsed by your browser's own HTML parser, the same one that renders web pages, so unclosed tags and other common HTML shortcuts are understood correctly before being turned into strict JSX.
After converting
Paste the JSX into your component and replace any inline event handlers with real functions, as listed in the notes. Then look for repeated blocks, such as list items or cards, that are better rendered from an array with map() and a stable key for each item.
Frequently asked questions
Does it handle SVG inside HTML?
Yes, SVG attributes are camelCased too. For standalone icons the SVG to JSX converter adds a component wrapper with props.
Why are my boolean attributes written as {true}?
Attributes such as required and autofocus have no value in HTML; in JSX writing them alone is fine, so they are kept bare where React allows.
Is the HTML sent anywhere?
No, it never leaves your browser.