Which HTML attributes get renamed?

class → className, for → htmlFor, plus tabindex, autocomplete, autofocus, autoplay, colspan, rowspan, contenteditable, crossorigin, datetime, enctype, formaction, hreflang, maxlength, minlength, novalidate, readonly, spellcheck, srcdoc, srcset, and usemap are all converted to their camelCase JSX equivalents.

How is an inline style attribute handled?

Each CSS declaration is split on ;, the property is camelCased, and the result is emitted as a JSX style object, e.g. style="padding: 8px" becomes style={{ "padding": "8px" }}.

Are void elements like and self-closed?

Yes. area, base, br, col, embed, hr, img, input, link, meta, param, source, track, wbr are automatically rewritten with a trailing />.

What happens to HTML comments?

is converted to the JSX comment form {/* comment */}.

Can I get a full component file instead of a fragment?

Yes. Enable "Wrap in React.FC Component", set a component name, and toggle TypeScript to get a complete .tsx or .jsx file with imports and a default export, downloadable via the Download button.

HTML to JSX / React

React / JSX

Convert raw HTML into clean React JSX or TypeScript TSX. Transforms class → className, inline styles → style objects, and self-closes tags.

Wrap in React.FC Component

Component Name

TypeScript (TSX)

HTML Input

0 lines · 0 chars HTML

React JSX / TSX Output

0 chars JSX

About This Tool

Rewrites raw HTML markup (copied from a design tool, a legacy template, or a static site) into React JSX or TSX: HTML-only attributes get their camelCase JSX names, inline style strings become style objects, void tags self-close, and comments switch to the JSX comment form. Optionally wraps the result in a full component with imports and a default export.

This is a syntax transform only; it doesn't execute or type-check the output. For converting a standalone SVG icon specifically, use SVG to JSX / React instead, which adds a live preview and currentColor handling that this tool doesn't.

Key Features

Wrap in React.FC Component: bundles the converted markup into a full component under a configurable Component Name.
TypeScript (TSX) toggle: switches both the output syntax and the Download button's file extension between .tsx and .jsx.
Live conversion: output updates on every keystroke, with Cmd/Ctrl+Enter to force a rerun.
Attribute rename table: 20+ HTML-only attributes (class, for, tabindex, autofocus, colspan, and more) mapped to their JSX equivalents.
Inline style conversion: a style="..." string becomes a JSX style object, and void elements are self-closed automatically.

Example

Input HTML with a class, a for label, a readonly input, and a void tag:

<div class="card">
  <label for="email">Email</label>
  <input type="email" id="email" readonly>
</div>

converts to:

<div className="card">
  <label htmlFor="email">Email</label>
  <input type="email" id="email" readOnly />
</div>

FAQ

Which HTML attributes get renamed?: class → className, for → htmlFor, plus tabindex, autocomplete, autofocus, autoplay, colspan, rowspan, contenteditable, crossorigin, datetime, enctype, formaction, hreflang, maxlength, minlength, novalidate, readonly, spellcheck, srcdoc, srcset, and usemap are all converted to their camelCase JSX equivalents.
How is an inline style attribute handled?: Each CSS declaration is split on ;, the property is camelCased, and the result is emitted as a JSX style object, e.g. style="padding: 8px" becomes style={{ "padding": "8px" }}.
Are void elements like <img> and <input> self-closed?: Yes. area, base, br, col, embed, hr, img, input, link, meta, param, source, track, wbr are automatically rewritten with a trailing />.
What happens to HTML comments?:  is converted to the JSX comment form {/* comment */}.
Can I get a full component file instead of a fragment?: Yes. Enable "Wrap in React.FC Component", set a component name, and toggle TypeScript to get a complete .tsx or .jsx file with imports and a default export, downloadable via the Download button.