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.

$html input

lines

0 chars1 lines

$jsx output[READY]

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.

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.