HTML to JSX Converter

Convert HTML code to valid JSX for React. Automatically transforms class to className, inline styles to objects, self-closes void elements, and more.

HTML Input0 chars

JSX Output

Conversion Rules

HTML

JSX

Reason

class="..."

className="..."

class is a reserved word in JS

for="..."

htmlFor="..."

for is a reserved word in JS

style="color: red"

style={{ color: "red" }}

JSX uses style objects

tabindex="0"

tabIndex="0"

JSX uses camelCase attributes

{/* comment */}

JSX uses JS comment syntax

<br>

<br />

JSX requires self-closing tags

onclick="fn()"

onClick="fn()"

JSX uses camelCase events

Why JSX is Different from HTML

JSX is a syntax extension for JavaScript, not HTML. Since it compiles to JavaScript function calls, certain HTML attributes conflict with JavaScript reserved words (like class and for), and inline styles must be JavaScript objects instead of CSS strings.

What This Tool Converts

- class to className, for to htmlFor
- Inline style strings to JavaScript objects
- HTML comments to JSX comments
- Self-closing void elements (br, img, hr, input)
- camelCase event handlers and attributes

How to Convert HTML to JSX Online

1.Paste your HTML code into the left panel, or click Load Sample to try an example.
2.The converter automatically transforms your HTML to valid JSX in real time.
3.Review the conversion rules table below to understand each transformation.
4.Click Copy to copy the JSX output to your clipboard.

FAQ

Does this handle all HTML attributes?

This tool converts the most common HTML-to-JSX attribute differences including class, for, tabindex, readonly, and 30+ other attributes. It also converts all inline event handlers (onclick, onchange, etc.) to camelCase format.

Will this produce a complete React component?

This tool converts raw HTML markup to valid JSX syntax. It does not wrap the output in a React component function. You can paste the JSX output directly into your component's return statement.

How are inline styles converted?

CSS style strings like style="color: red; font-size: 16px" are converted to JSX style objects: style={{ color: "red", fontSize: "16px" }}. CSS properties are automatically converted to camelCase.

Is my HTML data sent to a server?

No. All conversion runs entirely in your browser using JavaScript. Your HTML code is never uploaded, stored, or processed on any server.

HTML Prettifier

Format and beautify HTML with proper indentation.

HTML Entity Encoder

Encode and decode HTML entities.

Markdown to HTML

Convert Markdown to HTML code.