What is the difference between "for" and "htmlFor"?

Same story as `class` - `for` is a **reserved keyword** (the `for` loop). In JSX you write `htmlFor`. The attribute **links a label with a form field**: ` Email `. Clicking the label moves focus to the input.

Why must inline style be an object instead of a string?

In HTML you write `style="color: red; font-size: 12px"` (a string). JSX expects a **JavaScript object**: `style={{ color: "red", fontSize: "12px" }}`. The double braces mean "an object inside a JSX expression". Keys are **camelCase** (`fontSize`, not `font-size`). Values are strings (numeric pixel values can be passed as plain numbers: `fontSize: 12` becomes "12px").

Why do some tags need an explicit self-close?

JSX requires **every tag to be closed**. ` `, ` `, ` `, ` `, ` `, ` ` can be left open in HTML (the browser figures it out), but JSX needs ` `, ` `. These are **void elements** - they have no children, so we use the self-closing form.

What about SVG attributes like stroke-width?

All hyphenated SVG attributes become **camelCase**: `stroke-width` to `strokeWidth`, `stroke-linecap` to `strokeLinecap`, `clip-path` to `clipPath`, `fill-rule` to `fillRule`. Exceptions: `xmlns`, `viewBox` (already hyphen-free), `xmlns:xlink` (its camelCase form `xmlnsXlink` is deprecated - usually strip it).

What about boolean attributes like checked / disabled?

In HTML the presence alone is enough: ` `. In JSX it is **clearer to be explicit**: ` ` or ` ` for uncontrolled inputs. The toggle in the options lets you pick which form you prefer. Remember the React distinction: controlled (`checked`) vs uncontrolled (`defaultChecked`).

Does the converter handle onclick / onchange events?

Yes, though it **rarely makes full sense** to convert them - in HTML they are strings (`onclick="doStuff()"`), in JSX they should be **functions** (`onClick={doStuff}`). The converter rewrites `onclick` to `onClick` but keeps the string. You then have to swap the body for an actual function reference yourself.

What about HTML entities like & or ?

The **"Decode entities"** toggle rewrites: `&` to `&`, ` ` to a plain space (or `{' '}` if you want to keep the non-breaking effect), `<` to ` `. JSX accepts real characters and some entities, but not all (`©` works, `&` is better as a literal `&`).

Why must "tabindex" and "colspan" be camelCase?

JSX uses **camelCase for every prop**: `tabindex` to `tabIndex`, `colspan` to `colSpan`, `rowspan` to `rowSpan`, `maxlength` to `maxLength`, `readonly` to `readOnly`, `autoplay` to `autoPlay`. Exceptions: `data-*` and `aria-*` keep the hyphens (`data-testid`, `aria-label`).

Can I use this to convert a whole page?

Yes - paste the full ` `/` `. The converter will return JSX, but **React does not render ` ` or ` ` as a component** (the framework does that, for example Next.js in `app/layout.tsx`). You usually only care about the contents of ` `. Cut the wrapper out manually or paste only the relevant fragment.

HTML to JSX Converter - free

Why convert HTML to JSX?

JSX is HTML's React dialect - almost identical, but with a few easy-to-miss differences. `class` must be `className` (because `class` is a JavaScript keyword). `for` in `<label for="x">` becomes `htmlFor`. Comments `` do not work, you need `{/* ... */}`. Inline style must be a JavaScript object: `style={{ color: 'red' }}` with camelCase keys.

Paste your HTML here (from a Figma export, an icon library, a snippet from the web) and get ready JSX to drop into a React component. The converter handles SVG attributes (`stroke-width` to `strokeWidth`), self-closing for `<br>` / `<img>` / `<input>`, boolean attributes and HTML entities.

Everything runs in your browser - the code never leaves your machine.

How to use

Paste HTML in the left panel (a Figma fragment, an SVG icon, a piece of a page you want to refactor).
On the right you see JSX - with attributes and styles rewritten.
Toggle "Wrap in component" to get a ready `export default function Component() { return (...) }`.
Switch to TypeScript mode to add a typed return value.
Hit "Copy" and paste it into your `.tsx` file.

When this helps

Real situations where this converter saves time:

Migrating legacy HTML to React. You have an old project with `.html` files or a Bootstrap template and you want to rewrite it as React/Next.js. Paste each section, get a working component.
Icons from Figma / Iconify. A designer exports an SVG icon and you paste it to get a React component.
Snippets from CodePen / StackOverflow. Someone posted a vanilla HTML solution - paste it, get JSX.
Marketing assets. Paste a hero section or a CTA box and turn it into a component.
Email templates. Email HTML with literal `style="..."` becomes `style={{...}}` - useful if you preview templates inside a React app.
Refactoring. Your team moved to React and has 100 old product cards in plain HTML to migrate.
Learning. Studying React and want to see "what would this look like in JSX" quickly.

To convert SVG to a React component (a more advanced flow, with size/color props) see SVG to React component. For CSS gradients see gradient generator.

Frequently asked

`class` is a reserved JavaScript keyword (used to define object classes: `class User {}`). JSX compiles to JavaScript, so it cannot use `class` as a prop name. The React team picked `className` because it already exists in the DOM API (`element.className`), so it sounds natural to anyone with a DOM background.

Why convert HTML to JSX?

Everything runs in your browser - the code never leaves your machine.

How to use

Paste HTML in the left panel (a Figma fragment, an SVG icon, a piece of a page you want to refactor).

On the right you see JSX - with attributes and styles rewritten.

Toggle "Wrap in component" to get a ready `export default function Component() { return (...) }`.

Switch to TypeScript mode to add a typed return value.

Hit "Copy" and paste it into your `.tsx` file.

When this helps

Real situations where this converter saves time:

Migrating legacy HTML to React. You have an old project with `.html` files or a Bootstrap template and you want to rewrite it as React/Next.js. Paste each section, get a working component.
Icons from Figma / Iconify. A designer exports an SVG icon and you paste it to get a React component.
Snippets from CodePen / StackOverflow. Someone posted a vanilla HTML solution - paste it, get JSX.
Marketing assets. Paste a hero section or a CTA box and turn it into a component.
Email templates. Email HTML with literal `style="..."` becomes `style={{...}}` - useful if you preview templates inside a React app.
Refactoring. Your team moved to React and has 100 old product cards in plain HTML to migrate.
Learning. Studying React and want to see "what would this look like in JSX" quickly.

To convert SVG to a React component (a more advanced flow, with size/color props) see SVG to React component. For CSS gradients see gradient generator.

Frequently asked

HTML to JSX Converter