⚛️ HTML ↔ JSX Converter

Convert HTML snippets to valid JSX for React components. Handles className, camelCase props, and self-closing tags. Free online HTML to JSX converter — no signup.

HTML Input

JSX Output

How to Use

Choose direction

Select HTML → JSX to prepare HTML for React, or JSX → HTML to get standard HTML output.

Paste your code

Paste your HTML or JSX into the input area. Conversion happens automatically.

Copy the result

Click Copy. Your converted code is ready to paste into your project.

Frequently Asked Questions

What is the difference between HTML and JSX? +

JSX is a syntax extension for JavaScript used in React. Key differences: class becomes className, for becomes htmlFor, event handlers are camelCase (onclick → onClick), all tags must be self-closing (<br /> not <br>), and inline styles use objects ({color:"red"} not "color:red").

How do I convert class to className automatically? +

This tool automatically converts all class="..." attributes to className="..." and for="..." to htmlFor="...". It also fixes event attributes (onclick, onchange, etc.) to their React camelCase equivalents.

What happens to HTML comments in JSX? +

HTML comments () are converted to JSX comments ({/* comment */}). JSX requires wrapping them in curly braces as JavaScript expressions.

Does JSX require all tags to be self-closing? +

Tags with no children must be self-closed in JSX: <br />, <input />, <img />, <hr />. This tool automatically adds the closing slash to all void HTML elements when converting HTML to JSX.

Can I convert JSX back to HTML? +

Yes — select JSX → HTML direction. The tool converts className back to class, htmlFor to for, reverts camelCase events to HTML attributes, and converts self-closing tags back to HTML void element syntax.

Complete Guide: HTML to JSX Converter

When building React applications, you inevitably copy HTML snippets from design mockups, marketing templates, or component libraries — only to find that raw HTML doesn't work inside JSX. The HTML to JSX converter handles the mechanical transformation automatically, letting you focus on component logic rather than syntax details.

Why HTML and JSX Differ

JSX is a JavaScript syntax extension that looks like HTML but compiles to React.createElement() calls. Because it lives inside JavaScript, it follows stricter rules than the lenient HTML parser browsers use:

class → className — class is a reserved keyword in JavaScript. All class attributes become className.
for → htmlFor — <label for="id"> becomes <label htmlFor="id">.
Self-closing tags required — Void elements like <br>, <img>, <input>, <hr> must be self-closed: <br />.
Inline styles as objects — style="color: red; font-size: 14px" becomes style={{ color: 'red', fontSize: '14px' }}. Property names use camelCase.
Event handlers camelCase — onclick → onClick, onchange → onChange.
HTML comments removed —  is not valid inside JSX return blocks.
Single root element — JSX expressions must return exactly one root node. Wrap siblings in a <div> or React Fragment (<>...</>).

How to Use This Tool

Paste your HTML markup into the left panel.
The converter outputs clean JSX in real-time on the right.
Inline styles are converted to object syntax automatically.
Copy the result directly into your React component's return statement.

Code Example

/* Original HTML */
<div class="card" style="background: #fff; padding: 16px;">
  <img src="avatar.png" alt="User avatar">
  <label for="username">Username</label>
  <input type="text" id="username" onclick="handleClick()">
  <br>
  <!-- Submit button -->
  <button class="btn btn-primary">Submit</button>
</div>

/* Converted JSX */
<div className="card" style={{ background: '#fff', padding: '16px' }}>
  <img src="avatar.png" alt="User avatar" />
  <label htmlFor="username">Username</label>
  <input type="text" id="username" onClick={handleClick} />
  <br />
  <button className="btn btn-primary">Submit</button>
</div>

Common Pitfalls

data-* and aria-* attributes — These convert as-is, keeping hyphens. data-id remains data-id in JSX.
SVG attributes — SVG inside JSX has its own camelCase rules: stroke-width → strokeWidth, fill-rule → fillRule.
tabindex → tabIndex — Numeric attribute, also camelCased.
contenteditable → contentEditable — All HTML attributes with multiple words follow camelCase in JSX.
Dynamic values need curly braces — After conversion, replace static strings with JS expressions: src="{imageUrl}" → src={imageUrl}.

Pro Tips

Use Fragments for siblings: When converting a block with multiple root elements, wrap them in <>...</> instead of adding an unnecessary <div> to the DOM.
Extract repeated patterns: If the converted JSX has repeated structures (e.g., list items), extract them into a map over an array rather than duplicating markup.
dangerouslySetInnerHTML for rich text: If your HTML contains user-generated or CMS content, use dangerouslySetInnerHTML={{ __html: content }} — but sanitize the source first.

For converting Tailwind utility classes alongside your JSX migration, see Tailwind Converter. To encode special characters in your HTML before pasting, use HTML Entity Encoder.