What attributes are converted?

class→className, for→htmlFor, tabindex→tabIndex, colspan→colSpan, rowspan→rowSpan, and all event handlers (onclick→onClick, etc.). Kebab-case CSS attributes in style strings are also converted to camelCase.

How are inline styles handled?

style="color: red; font-size: 14px" becomes style={{ color: "red", fontSize: "14px" }}. Numeric values like font-size stay as strings.

Are HTML comments preserved?

HTML comments ( ) are converted to JSX comments ({/* */}) so they remain visible in the output.

HTML to JSX

Convert HTML markup to valid JSX for React components.

Paste HTML and get valid JSX output. Converts class to className, for to htmlFor, transforms inline style strings to JSX style objects, closes self-closing tags, converts kebab-case attributes to camelCase, and handles common event handler attributes.

html input

lines

0 chars1 lines

jsx outputREADY

lines

0 chars1 lines

Related Tools

</> HTML Formatter

Pretty-print HTML with proper indentation and readability.

><HTML Minifier

Remove whitespace and comments from HTML to reduce file size.

TWCSS to Tailwind

Map common CSS properties to approximate Tailwind CSS utility classes.

FAQ

What attributes are converted?: class→className, for→htmlFor, tabindex→tabIndex, colspan→colSpan, rowspan→rowSpan, and all event handlers (onclick→onClick, etc.). Kebab-case CSS attributes in style strings are also converted to camelCase.
How are inline styles handled?: style="color: red; font-size: 14px" becomes style={{ color: "red", fontSize: "14px" }}. Numeric values like font-size stay as strings.
Are HTML comments preserved?: HTML comments () are converted to JSX comments ({/* */}) so they remain visible in the output.