EspañolConvert HTML to JSX
Paste the HTML and copy the JSX. The conversion happens in your browser and covers the differences that most often break when you paste HTML into a React component.
How to useHTML to React (JSX)
Available in: 
Convert HTML to JSX: what it is for
Paste the HTML and it's converted instantly: class and for become className and htmlFor, attributes like tabindex, maxlength and autocomplete go camelCase, style becomes an object, boolean attributes lose their value, void tags get the slash and comments become {/* */}. Inline events become functions with the old code in a comment.
data- and aria- attributes stay as they are, and SVG attributes are converted too. Check generate component to get the ready function with the name you choose.
How to use
- Paste the HTML.
- Check generate component if you want the ready function.
- Copy the JSX into your React project.
When to use it
- Moving HTML templates into React and Next.js projects.
- Converting SVG icons into components.
- Adapting snippets copied from other sites.
Frequently asked questions
What changes from HTML to JSX?
class becomes className and for becomes htmlFor; hyphenated and event attributes go camelCase (tabindex becomes tabIndex, onclick becomes onClick); style becomes an object ({{ marginTop: '8px' }}); void tags (img, br, input) get the closing slash; comments become {/* */}.
Do data- and aria- attributes change?
No. data-* and aria-* stay the same in JSX, with hyphens.
What about the JavaScript inside onclick?
The content of inline event handlers is turned into a comment, because in React the event receives a function. Rewrite the action as a component function.
Does SVG work?
Yes. SVG attributes like stroke-width, fill-rule and xlink:href become strokeWidth, fillRule and xlinkHref.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.