HTML to JSX

HTML to JSX: Paste HTML Directly into React Components

Copying HTML from a design tool, a website, or an email template into a React component always requires manual fixes — class becomes className, style strings become objects, void elements need closing slashes. This converter handles all of those transformations automatically.

Formula

class="btn" → className="btn" for="name" → htmlFor="name" style="color:red" → style={{color:'red'}} <br> → <br />

CSS property names in inline styles are camelCased: font-size → fontSize, background-color → backgroundColor, z-index → zIndex.

Attribute Name Mapping

React requires JSX attribute names to match the DOM property names, not HTML attribute names. The most common: class → className, for → htmlFor, tabindex → tabIndex, readonly → readOnly, colspan → colSpan, rowspan → rowSpan, maxlength → maxLength, enctype → encType, crossorigin → crossOrigin. The converter handles all of these automatically.

Inline Style Conversion

HTML inline styles are CSS strings: style="color: red; font-size: 14px". JSX expects a JavaScript object: style={{color: 'red', fontSize: '14px'}}. The converter parses the CSS string, splits on semicolons, converts each property name to camelCase, and wraps it in the JSX double-brace syntax.

Void Element Self-Closing

In HTML, void elements (br, hr, img, input, link, meta, area, base, col, embed, param, source, track, wbr) do not need a closing tag. In JSX they must be self-closed:
instead of
. The converter identifies void elements by name and adds the closing slash automatically.

Practical Examples

Porting a Figma-Exported HTML Component to React

Design tools often export HTML with class attributes and inline styles. Convert to JSX before adding to your component.

1.Copy the exported HTML from Figma or your design tool
2.Paste into the input pane
3.Review the output — class → className, styles → objects
4.Copy the JSX and paste into your React component's return statement

Transformations Applied

class → className, for → htmlFor, and 10+ other attribute renames
Inline style strings → camelCased JavaScript objects
Void elements self-closed with trailing space-slash
Boolean attributes (disabled, checked) → attr={true}

Good Use Cases

Porting HTML exported from Figma, Zeplin, or Webflow into React
Converting email templates to React Email or MJML components
Migrating vanilla HTML snippets into a React codebase
Quickly prototyping with browser-copied HTML in a JSX context

Frequently Asked Questions

Which HTML attributes are renamed for JSX?

class→className, for→htmlFor, tabindex→tabIndex, readonly→readOnly, maxlength→maxLength, minlength→minLength, colspan→colSpan, rowspan→rowSpan, and others. See the MDN React docs for the full mapping.

How are inline styles converted?

Inline style strings like style="color: red; font-size: 14px" are converted to JSX style objects: style={{color: 'red', fontSize: '14px'}}. Property names are camelCased automatically.

Are void elements self-closed?

Yes. HTML void elements (br, hr, img, input, link, meta, etc.) are converted to self-closing JSX tags:
instead of
.

Are boolean attributes handled?

Standalone boolean attributes like disabled are converted to disabled={true} for explicit JSX boolean syntax.