</>

HTML to JSX Converter

LOCAL · Browser-Only

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 recipe

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

What HTML attributes does this tool convert?

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.

Does it convert inline styles?

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.

How are self-closing tags handled?

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

Does it handle event handlers?

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

How do I convert a static HTML page to a React component?

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.

Can I convert a Bootstrap or Tailwind HTML template to JSX?

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.

Does it output TSX for TypeScript projects?

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 online

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 xml converter

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

█

Ascii text generator

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

Tailwind classes to css

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

🎨

Hsl to hex

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

Px to rem

Free online CSS units converter - convert between px, rem, em, vw, vh, and other CSS units

💱

Exchange rate calculator

Free online currency converter - convert between currencies with current exchange rates

Keep reading: HTML Cheat Sheet and regex syntax reference. Doing this in code instead? See the encoding endpoints.