HTML to JSX Converter

How to convert HTML to JSX

1. Paste your HTML markup into the input field — a component template, a design prototype export, or a snippet from an existing page.
2. Click "Convert" — the JSX output appears instantly with all attributes renamed: class→className, for→htmlFor, tabindex→tabIndex.
3. Switch to "JSX → HTML" using the toggle above if you need the reverse direction.
4. Click "Copy" to copy the JSX and paste it directly into your React component's return block.
5. Review the output — complex inline styles or non-standard attributes may need a quick manual adjustment.

How the HTML to JSX converter works

The converter parses the HTML string and applies a series of rule-based transformations to produce valid JSX. It handles attribute renaming (class → className, for → htmlFor), camelCase event names (onclick → onClick), self-closing void elements (<br />, <img />, <input />), inline style string-to-object conversion, and boolean attribute normalization. The conversion runs entirely in your browser — no data is sent to any server.

JSX is not HTML — it is a JavaScript syntax extension that React uses to describe UI components. The differences are intentional: JSX compiles to React.createElement() calls, and JavaScript has reserved words (class, for) and naming conventions (camelCase) that differ from HTML attribute names. The converter maps every systematic difference automatically, but complex template logic and framework-specific syntax may still require a manual review pass.

// Input HTML:
<div class="card" onclick="handleClick()">
  <label for="email">Email</label>
  <input type="email" id="email" readonly tabindex="1"
         style="border: 1px solid red; font-size: 14px">
  <br>
  <img src="avatar.png" alt="User">
</div>

// Output JSX:
<div className="card" onClick={handleClick}>
  <label htmlFor="email">Email</label>
  <input type="email" id="email" readOnly tabIndex={1}
         style={{ border: '1px solid red', fontSize: '14px' }} />
  <br />
  <img src="avatar.png" alt="User" />
</div>

Why HTML attributes change names in JSX

JSX looks like HTML but uses JavaScript attribute names, not HTML attribute names. Because JSX compiles directly to JavaScript function calls, it must avoid JavaScript reserved words and follow JavaScript naming conventions. Understanding why the names change helps you remember the rules without a lookup table.

• class → className — class is a reserved word in JavaScript used for ES6 class declarations. React uses className to avoid the conflict while applying CSS classes in exactly the same way.
• for → htmlFor — for is also reserved in JavaScript (for loops, for...of statements). The label element's for attribute becomes htmlFor in JSX.
• onclick → onClick — HTML event attributes are lowercase; JSX uses camelCase following JavaScript naming conventions. All on* events become camelCase: onchange → onChange, onmouseenter → onMouseEnter, onkeydown → onKeyDown.
• readonly → readOnly — Multi-syllable boolean attributes become camelCase: readonly → readOnly, tabindex → tabIndex, maxlength → maxLength, contenteditable → contentEditable.
• style="color: red" → style={{ color: 'red' }} — HTML inline styles are CSS strings; JSX style must be a JavaScript object with camelCased property names. The outer braces denote a JavaScript expression; the inner braces create the object literal.
• **<!-- comment --> → {/* comment */}** — HTML comments are not valid inside JSX. They become JavaScript block comments wrapped in JSX expression braces.

HTML to JSX transformation reference

The table below covers the complete set of transformations applied during conversion. Self-closing tags and style conversion are the two areas most likely to produce output that needs a review.

When to convert HTML to JSX — and when not to

Convert HTML to JSX when:

• Building React components from design exports — designers often deliver HTML/CSS files; converting to JSX is the first step to turning them into components.
• Migrating static HTML templates to React — existing HTML pages or email templates that need to become React-rendered UI.
• Prototyping with AI tools — AI code generators often output standard HTML; converting to JSX lets you paste results directly into components.
• Incorporating third-party HTML snippets — UI libraries, widget embeds, and documentation examples are usually in HTML syntax.
• Learning JSX syntax — converting known HTML is an effective way to understand which attributes and patterns change in JSX.

Write JSX directly when:

• The component has dynamic data — JSX's {expression} syntax for binding props, state, and event handlers cannot come from static HTML conversion.
• You need conditional rendering — {condition && <Element />} and ternary expressions must be written in JSX directly.
• The structure maps to reusable components — once converted, replace repeated markup blocks with component references.
• Custom hooks or context are involved — any React-specific logic must be added by hand after the structural conversion.

Inline styles: from CSS string to React style object

Inline style conversion is the most complex transformation. In HTML, style is a string of CSS declarations. In JSX, style must be a JavaScript object where each CSS property name is camelCased and the value is a string (or number for unitless properties). The converter handles both the camelCasing and the string-to-object restructuring automatically.

// HTML inline style (CSS string):
style="color: #333; font-size: 16px; margin-top: 8px; z-index: 10"

// JSX style object (camelCased properties):
style={{ color: '#333', fontSize: '16px', marginTop: '8px', zIndex: 10 }}

// Unitless numeric CSS properties (zIndex, opacity, fontWeight, lineHeight)
// are passed as numbers, not strings — React handles the unit automatically.

// CSS vendor prefixes become PascalCase in JSX:
// -webkit-transform → WebkitTransform
// -moz-animation    → MozAnimation