HTML to JSX Converter

Convert HTML to valid React JSX — class to className, style strings to objects, and more.

HTML to JSX Converter — What It Does

Paste any HTML snippet and get valid React JSX output instantly. The converter handles every attribute and structural difference between HTML and JSX — including reserved keyword renames, style object transformation, void element self-closing, camelCase event handlers, and SVG attribute conversion. Ideal for migrating templates, copying designs from HTML prototypes into React components, or understanding JSX syntax rules.

What Gets Converted

  • class → className — avoids JS reserved keyword conflict
  • for → htmlFor — on <label> elements
  • style="..." → style={{}} — CSS string to JS object with camelCase properties
  • Void elements — <br>, <img>, <input> → self-closed with />
  • HTML comments → JSX { /* comment */ } syntax
  • SVG attributes — stroke-width → strokeWidth, fill-opacity → fillOpacity
  • Event handlers — onclick → onClick, onchange → onChange

Common Conversion Examples

  • <div class="box"> → <div className="box">
  • <label for="email"> → <label htmlFor="email">
  • style="color:red;font-size:14px" → style={{ color: 'red', fontSize: '14px' }}
  • <input type="text"> → <input type="text" />

Things to Double-Check After Converting

  • Event handler values — Inline string handlers like onClick="doSomething()" are preserved but should be replaced with proper React function references.
  • Boolean attributes — HTML disabled or checked should use JSX boolean syntax: disabled={true}.
  • Custom data attributes — data-* attributes remain lowercase in JSX (they are not camelCased).
  • tabindex → tabIndex — Some less common attributes also get camelCased; verify your output compiles without warnings.

Frequently Asked Questions

Why does React use className instead of class?
In JSX, attribute names follow JavaScript DOM property names rather than HTML attribute names. Since class is a reserved keyword in JavaScript (used for ES6 classes), React uses className to avoid conflicts. Similarly, for becomes htmlFor on label elements.
How are inline styles converted from HTML to JSX?
HTML uses a string for the style attribute (e.g., style="color: red; font-size: 14px"), but JSX requires a JavaScript object (e.g., style={{ color: "red", fontSize: "14px" }}). The converter transforms CSS property names from kebab-case to camelCase and wraps values in quotes.
Do all void elements need to be self-closed in JSX?
Yes. HTML void elements like <br>, <img>, <input>, <hr>, and <meta> do not need a closing tag in HTML, but JSX requires all elements to be explicitly closed. The converter adds the trailing slash: <br /> , <img />, <input />, etc.
How are HTML event handlers converted to JSX?
HTML uses lowercase event attributes like onclick, onchange, and onmouseover. In JSX these become camelCase: onClick, onChange, onMouseOver. String values like onclick="doSomething()" are kept as-is but should be replaced with proper function references in your React code.
Are SVG attributes also converted to JSX format?
Yes. SVG attributes such as stroke-width, fill-opacity, clip-path, and xlink:href use kebab-case or colon notation in HTML. In JSX they become strokeWidth, fillOpacity, clipPath, and xlinkHref. The converter handles these SVG-specific camelCase transformations.