HTML to JSX Converter

Convert HTML markup to React JSX instantly — handles className, htmlFor, inline styles, self-closing tags, and more.

About HTML to JSX Conversion

When building React components, you often start with plain HTML markup and need to convert it to JSX — the JavaScript XML syntax used by React. While JSX looks like HTML, there are important differences that can cause errors if ignored.

This tool automates all the common transformations so you can paste raw HTML and get valid JSX instantly, without manually hunting down every class attribute or forgotten self-closing tag.

What Gets Converted

class → className

React reserves class as a JavaScript keyword. All occurrences are renamed to className.

<!-- HTML -->
<div class="card active">

// JSX
<div className="card active">
for → htmlFor

The for attribute on <label> elements becomes htmlFor.

<!-- HTML -->
<label for="email">Email</label>

// JSX
<label htmlFor="email">Email</label>
Self-closing void elements

HTML void elements like <br>, <img>, <input>, and <hr> must be explicitly self-closed in JSX.

<!-- HTML -->
<br>
<img src="photo.jpg" alt="Photo">
<input type="text">

// JSX
<br />
<img src="photo.jpg" alt="Photo" />
<input type="text" />
Inline styles → style objects

CSS strings become JavaScript objects with camelCase property names.

<!-- HTML -->
<div style="max-width: 800px; background-color: #fff;">

// JSX
<div style={{ maxWidth: '800px', backgroundColor: '#fff' }}>
HTML comments → JSX comments

HTML comments are converted to JSX expression comments.

<!-- HTML comment -->
// becomes
{/* HTML comment */}
Attribute name conversions

Many HTML attributes are renamed to their camelCase JSX equivalents: tabindex → tabIndex, readonly → readOnly, maxlength → maxLength, autocomplete → autoComplete, colspan → colSpan, rowspan → rowSpan, and more.

Event handler camelCase

Event attributes like onclick, onchange, onsubmit become onClick, onChange, onSubmit.

How to Use This Converter

  1. Paste your HTML into the left textarea. It can be a full document snippet, a single component, or any fragment.
  2. Click "Convert to JSX" to transform the markup.
  3. Review the output on the right. Check that all transformations look correct for your use case.
  4. Copy or Download the result and paste it into your React component.
  5. Wrap in a return statement and add your component logic as needed.

Common Use Cases

  • Migrating HTML templates to React: Convert existing HTML mockups or static pages to React components.
  • Using HTML from design tools: Figma, Webflow, and other tools export HTML — convert to JSX for React projects.
  • Learning JSX: See exactly how HTML attributes map to their JSX counterparts.
  • Debugging: Quickly check whether a snippet is valid JSX before pasting into your editor.
  • Copy-pasting from MDN or Stack Overflow: HTML examples need JSX transformations before they work in React.

Key Features

  • Converts class to className and for to htmlFor
  • Self-closes all HTML void elements automatically
  • Transforms inline style strings to JavaScript style objects with camelCase properties
  • Converts HTML comments to JSX expression comments
  • Renames 20+ attribute names to their JSX camelCase equivalents
  • Converts all event handler attributes to camelCase
  • One-click copy to clipboard and download as .jsx file
  • 100% client-side — no data ever leaves your browser
  • No account, no limits, no watermarks