</>

HTML to JSX Converter

Convert HTML to valid React JSX code

Wrap in component

Input HTML

JSX Output

Supported Conversions

Attribute

classclassName

forhtmlFor

tabindextabIndex

readonlyreadOnly

maxlengthmaxLength

autocompleteautoComplete

autofocusautoFocus

novalidatenoValidate

charsetcharSet

http-equivhttpEquiv

contenteditablecontentEditable

colspancolSpan

rowspanrowSpan

crossorigincrossOrigin

enctypeencType

srcsetsrcSet

SVG

stroke-widthstrokeWidth

fill-rulefillRule

clip-pathclipPath

stroke-linecapstrokeLinecap

stroke-linejoinstrokeLinejoin

fill-opacityfillOpacity

stop-colorstopColor

xlink:hrefxlinkHref

xml:spacexmlSpace

Event

onclickonClick

onchangeonChange

onsubmitonSubmit

onmouseoveronMouseOver

Style

style="..."style={{ ... }}

Comment

{/* ... */}

Self-close

Share to Community

Was this tool helpful?

What is HTML to JSX Converter?

Free online HTML to JSX converter to convert HTML code to clean, valid React JSX with this free online converter.

Automatically transforms HTML attributes like class to className, for to htmlFor, and converts inline styles to JSX style objects with camelCase properties. Self-closing tags like br, hr, img, and input are properly closed, HTML comments become JSX comments, and event handlers are converted to camelCase. The conversion happens live as you type, entirely in your browser - your code never leaves your device. No signup required.

How to Use HTML to JSX Converter

1Paste your HTML code into the input editor on the left
2The JSX output appears instantly on the right as you type
3Review the conversion stats showing the number of changes applied
4Click 'Copy JSX' to copy the converted code to your clipboard

Frequently Asked Questions

The converter transforms all common HTML-to-JSX attribute differences: class to className, for to htmlFor, tabindex to tabIndex, readonly to readOnly, maxlength to maxLength, colspan to colSpan, rowspan to rowSpan, cellpadding to cellPadding, cellspacing to cellSpacing, enctype to encType, crossorigin to crossOrigin, autocomplete to autoComplete, autofocus to autoFocus, and novalidate to noValidate.

Yes. Inline style attributes like style="color: red; font-size: 14px" are converted to JSX style objects like style={{ color: "red", fontSize: "14px" }}. CSS property names are automatically converted to camelCase, and values are properly quoted.

HTML void elements like <br>, <hr>, <img>, <input>, <meta>, <link>, and others that are not self-closed in HTML are automatically converted to self-closing JSX tags (e.g., <br /> and <img ... />).

Yes. HTML event handler attributes like onclick, onchange, onsubmit, onmouseover, and many others are converted to their camelCase JSX equivalents (onClick, onChange, onSubmit, onMouseOver, etc.).

Share this tool

Related Tools

PDF

HTML to PDF Converter

Convert HTML to PDF online free - create downloadable PDF documents from HTML code in your browser

HTML to Markdown

Free online HTML to markdown - convert HTML markup to clean, readable Markdown syntax

🎨

Color Converter

Free online color converter - convert colors between HEX, RGB, HSL formats with live preview

YML

YAML ↔ JSON Converter

Free online YAML ↔ JSON converter - convert between YAML and JSON formats with validation and formatting

📊

CSV to JSON Converter

Free online CSV to JSON converter - convert CSV data to JSON format with delimiter options and preview

🔄

XML to JSON Converter

Free online XML to JSON converter - convert XML documents to JSON format

What is HTML to JSX Converter?

Free online HTML to JSX converter to convert HTML code to clean, valid React JSX with this free online converter.

Frequently Asked Questions

HTML void elements like <br>, <hr>, <img>, <input>, <meta>, <link>, and others that are not self-closed in HTML are automatically converted to self-closing JSX tags (e.g., <br /> and <img ... />).

Yes. HTML event handler attributes like onclick, onchange, onsubmit, onmouseover, and many others are converted to their camelCase JSX equivalents (onClick, onChange, onSubmit, onMouseOver, etc.).