About HTML → React JSX

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.