HTML to JSX Converter

Convert HTML to React JSX syntax — class→className, for→htmlFor, inline styles, and self-closing tags.

HTML Input

or drop a file here

JSX Output

<div className="container main-wrapper">
  <label htmlFor="username">Username</label>
  <input type="text" id="username" readOnly tabIndex="1" autoComplete="off" />
  <img src="/avatar.png" alt="User avatar" />
  <br />
  <hr />
  {/* This is a comment */}
  <p style={{ color: "red", fontSize: "16px", backgroundColor: "#fff" }}>Hello World</p>
</div>

What gets converted

class=→className=

for=→htmlFor=

tabindex=→tabIndex=

readonly→readOnly

autocomplete=→autoComplete=

style="color: red"→style={{ color: "red" }}

→{/* comment */}

About HTML to JSX Converter

When migrating HTML templates to React, several attribute names and patterns need to change to conform to JSX syntax. JSX uses camelCase for most HTML attributes and reserves words like class and for (which are JavaScript keywords) — replacing them with className and htmlFor. Void (self-closing) elements must end with />, and inline styles must be JavaScript objects rather than strings. This converter handles all these transformations automatically using regex-based string processing.

Built and maintained by Meet Shah · Last updated 28 July 2026

What this tool is used for

Converting markup into JSX for a React component.
Fixing the attribute names JSX spells differently.
Converting inline styles into a style object.
Producing a component body from designer-supplied HTML.
Converting a batch of markup without hand-editing each attribute.

Frequently Asked Questions

What has to change for HTML to become JSX?: `class` becomes `className`, `for` becomes `htmlFor`, every hyphenated attribute becomes camelCase, inline `style` becomes an object, and void elements need an explicit closing slash. The names change because JSX compiles to function calls, not to markup.
Why is class a reserved word here?: Because JSX attributes become object properties in the compiled output, and `class` was a reserved word in JavaScript. `for` has the same problem — both are keywords, so React chose the DOM property names `className` and `htmlFor` instead.
How does the style attribute convert?: Into an object with camelCased properties: `style="font-size: 12px"` becomes `style={{ fontSize: '12px' }}`. The double braces are one for JSX interpolation and one for the object literal, which is the syntax people most often mistype.
Which attributes keep their hyphens?: `data-*` and `aria-*`, both passed through unchanged because the DOM expects those exact names. That is a real exception rather than an oversight — camelCasing them would produce an attribute the browser does not recognise.
What about HTML comments?: They are not valid JSX and must become `{/* … */}`. A raw HTML comment left in place is a syntax error rather than being ignored, which is the most common reason a pasted block fails to compile.

Common errors and gotchas

Leaving hyphenated attributes in place, which React ignores silently rather than erroring.
Forgetting `class` becomes `className` and `for` becomes `htmlFor`.
Leaving inline style as a string, when JSX needs an object with camelCased keys.
Failing to self-close void elements, which JSX requires and HTML does not.
Converting markup with template syntax from another engine, which JSX treats as text.