HTML to JSX
NewConvert HTML markup into JSX-compatible syntax for React components.
HTML to JSX
Convert HTML markup to JSX
Paste HTML and get JSX-ready markup: class → className, for → htmlFor, self-closing void elements, camelCased event/style attributes, and inline style="..." strings converted to JSX style objects.
Frequently Asked Questions
Does this convert class to className automatically?
Yes, along with a full attribute map covering for → htmlFor, tabindex → tabIndex, readonly → readOnly, and common event handlers like onclick → onClick.
What happens to void elements like <img> and <input>?
They're automatically self-closed with a trailing /> since JSX requires that for elements with no children, even if your pasted HTML didn't close them that way.
How is an inline style="..." string handled?
It's parsed into a JSX style object: each CSS property is camelCased and its value quoted, e.g. style="font-size: 14px" becomes style={{ fontSize: '14px' }}.
What happens to HTML comments?
They're stripped entirely. JSX comments use a different syntax ({/* ... */}) and inserting them automatically in the right position isn't reliable, so removing them is safer than guessing.
Will this handle deeply nested or malformed HTML correctly?
It works tag-by-tag via regex on opening tags, so well-formed HTML converts reliably, but severely malformed markup (unclosed tags, invalid nesting) may not convert perfectly — always review the output before using it.