Converter

</>

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

Escape

{ text }{'{'} text {'}'}

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.

Paste raw HTML or a markup snippet and turn it into a React component you can drop straight into your project. 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. Useful when migrating a static HTML page to React, converting a Bootstrap or Tailwind template to JSX, or fixing the class to className error in your editor. 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.).

Paste the body markup of your HTML page into the input. The converter rewrites class to className, closes void tags, and converts inline styles so the output is valid JSX. Wrap the result in a function that returns the markup and you have a working React component. For full pages, convert one section at a time and assemble them into smaller components.

Yes. Bootstrap and Tailwind markup is just HTML with class names, so the converter changes every class to className and leaves the utility classes intact. Paste the template and the JSX output keeps the same styling once your project loads the matching CSS framework.

The output is plain JSX, which is valid inside .tsx files. You can paste it directly into a TypeScript React component. Add prop types or interfaces around it yourself, since the converter only transforms the markup, not the surrounding component logic.

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

<{>

JSON to XML Converter

Free online JSON to XML converter - convert JSON data to XML format instantly

█

Text to ASCII Art

Free online text to ascii art - convert text into ASCII art with multiple font styles

🔄

XML to JSON Converter

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

Tailwind to CSS

Free online tailwind to CSS - convert Tailwind CSS classes to vanilla CSS properties

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.).