What transformations happen?

class → className, for → htmlFor, tabindex → tabIndex, self-closing of void elements, conversion of HTML entities, camelCase for event handlers (onclick → onClick).

Does it handle style attributes?

Yes — `style="color: red"` becomes `style={{color: 'red'}}` (object syntax). Kebab-case CSS properties become camelCase.

What about inline SVG?

Converts SVG attributes too — `stroke-width` → `strokeWidth`, `fill-rule` → `fillRule`. Usable directly in React components.

Are comments preserved?

HTML comments become JSX comments ({/* ... */}). Multi-line comments are handled correctly.

HTML → React JSX | DevTools Surf

DevTools Surf

Example: HTML → React JSX

A worked example, rendered from real sample data. Sign in to run the tool on your own input.

Input

<div class="container">
  <img src="photo.jpg" alt="Photo">
  <label for="name">Name</label>
  <input type="text" id="name" tabindex="1" autofocus readonly>
  <!-- Comment -->
  <p style="color: red; font-size: 14px;">Hello</p>
</div>

Output

<div className="container">
  <img src="photo.jpg" alt="Photo" />
  <label htmlFor="name">Name</label>
  <input type="text" id="name" tabIndex={1} autoFocus readOnly />
  {/* Comment */}
  <p style={{ color: "red", fontSize: "14px" }}>Hello</p>
</div>

About HTML → React JSX

HTML → React JSX preview - Web / Frontend tool

Convert HTML to valid React JSX syntax. Part of the DevTools Surf developer suite. Browse more tools in the Web / Frontend collection.

Use Cases

Converting HTML templates to React components during migration
Transforming design tool HTML exports into valid JSX syntax
Adapting HTML snippets from documentation into React projects
Converting server-rendered HTML partials to client-side React components

Tips

Converts class to className and for to htmlFor automatically
Handles self-closing tags and boolean attributes for React
Paste HTML from design tools to get React-ready JSX instantly

Fun Facts

JSX was created by Facebook and introduced alongside React in 2013; it was initially criticized for 'mixing HTML with JavaScript.'
JSX is not valid JavaScript; it requires a transpilation step, originally through JSTransform and now through Babel or SWC.
The className attribute exists because 'class' is a reserved keyword in JavaScript, a constraint inherited from ECMAScript 3 (1999).

FAQ

What transformations happen?: class → className, for → htmlFor, tabindex → tabIndex, self-closing of void elements, conversion of HTML entities, camelCase for event handlers (onclick → onClick).
Does it handle style attributes?: Yes — `style="color: red"` becomes `style={{color: 'red'}}` (object syntax). Kebab-case CSS properties become camelCase.
What about inline SVG?: Converts SVG attributes too — `stroke-width` → `strokeWidth`, `fill-rule` → `fillRule`. Usable directly in React components.
Are comments preserved?: HTML comments become JSX comments ({/* ... */}). Multi-line comments are handled correctly.

Related Web / Frontend Tools

Meta Tags / OG Previewer Tailwind → CSS HTML → Markdown SVG → React Component CSS Unit Converter robots.txt Validator Sitemap XML Validator RSS/Atom Feed Validator