HTML to JSX Converter

You found a perfect HTML template for a dashboard card. You paste it into your React component and get 15 errors: class should be className, for should be htmlFor, style="margin-top: 10px" should be style={{marginTop: '10px'}}, onclick should be onClick, and self-closing tags like <img> need the closing slash. Converting 200 lines of HTML to JSX by hand takes 20 minutes and you’ll still miss one tabindex that should be tabIndex.

Why This Converter (Not Find-and-Replace)

Find-and-replace catches class → className but misses style string-to-object conversion, tabindex → tabIndex casing, SVG attribute casing (viewBox, strokeWidth), and for → htmlFor. This tool handles all HTML-to-JSX transformations in one pass — attributes, styles, event handlers, self-closing tags, and SVG specifics. Paste HTML, copy JSX. Everything runs in your browser; no data is sent anywhere.

What Is HTML to JSX Conversion?

When building React applications, you cannot paste raw HTML directly into a component’s return statement. React uses JSX (JavaScript XML) — a syntax extension that looks like HTML but has key differences to match JavaScript semantics.

Common differences between HTML and JSX:

• class becomes className (because class is a reserved keyword in JavaScript)
• for on <label> becomes htmlFor
• Inline style takes a JavaScript object instead of a string: style={{ color: 'red' }} not style="color: red"
• All tags must be closed: void elements like <br> and <img> must be written as <br /> and <img />
• Event handlers use camelCase: onClick, onChange, onSubmit — not onclick, onchange, onsubmit
• Boolean attributes are written without a value: disabled instead of disabled="disabled" or disabled="true"
• HTML comments become JSX comments: {/* comment */}

This converter handles all of these transformations automatically, letting you paste any HTML snippet and immediately use the result in your React component.

How to Use the Converter

1. Paste your HTML into the left panel. The conversion happens instantly as you type.
2. Review the JSX output in the right panel. Any warnings (such as removed <!DOCTYPE> declarations) appear below the output.
3. Copy the JSX using the Copy button and paste it into your React component.

The converter works entirely in your browser — no data is sent to any server.

Transformations Applied

class → className

HTML uses class to assign CSS classes to elements. In JSX, you must use className because class is a reserved keyword in JavaScript.

<!-- HTML -->
<div class="container main-content">
  <p class="text-lg">Hello</p>
</div>

/* JSX */
<div className="container main-content">
  <p className="text-lg">Hello</p>
</div>

for → htmlFor

The HTML for attribute on <label> elements links them to form inputs by id. In JSX, for is a reserved keyword, so React uses htmlFor instead.

<!-- HTML -->
<label for="username">Username</label>
<input id="username" type="text" />

/* JSX */
<label htmlFor="username">Username</label>
<input id="username" type="text" />

Inline Style Strings → Style Objects

In HTML, style is a string of CSS declarations. In JSX, style takes a JavaScript object where property names are camelCase.

<!-- HTML -->
<div style="color: red; font-size: 14px; background-color: #f0f0f0">
  Styled text
</div>

/* JSX */
<div style={{ color: "red", fontSize: "14px", backgroundColor: "#f0f0f0" }}>
  Styled text
</div>

Note that multi-word CSS properties like font-size become fontSize and background-color becomes backgroundColor (camelCase, no hyphens).

Self-Closing Void Elements

HTML allows void elements (elements with no children) to be written without a closing slash. JSX requires all elements to be explicitly closed.

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

/* JSX */
<br />
<img src="photo.jpg" alt="Photo" />
<input type="text" name="email" />
<hr />

Boolean Attributes

HTML boolean attributes can appear as standalone names or with redundant values. JSX uses the presence of the attribute name alone (or ={false} to explicitly set false).

<!-- HTML -->
<input type="checkbox" checked disabled>
<button disabled="disabled">Click</button>

/* JSX */
<input type="checkbox" checked disabled />
<button disabled>Click</button>

Event Handler Conversion

HTML inline event handlers use lowercase names. React event handlers follow camelCase naming with an on prefix.

<!-- HTML -->
<button onclick="handleClick()">Click</button>
<input onchange="handleChange(event)" />
<form onsubmit="handleSubmit(event)">...</form>

/* JSX */
<button onClick={() => { handleClick() }}>Click</button>
<input onChange={() => { handleChange(event) }} />
<form onSubmit={() => { handleSubmit(event) }}>...</form>

Note: The converter wraps inline handler strings in an arrow function. You should update these to reference your React component’s event handler functions directly (e.g., onClick={handleClick}).

HTML Comments → JSX Comments

HTML comments (<!-- -->) are not valid JSX syntax. The converter transforms them into JSX expression comments.

<!-- HTML comment -->
<div>
  <!-- This is a section header -->
  <h1>Title</h1>
</div>

{/* HTML comment */}
<div>
  {/* This is a section header */}
  <h1>Title</h1>
</div>

Common Use Cases for Developers

Converting design mockups: Designers often hand off HTML/CSS from tools like Figma exports, static site builders, or email templates. This converter lets you quickly adapt those snippets to React without manually hunting for every class attribute.

Migrating legacy HTML: When refactoring a traditional HTML/jQuery app to React, copying sections of existing HTML templates and converting them to JSX is a frequent task.

Learning React: Beginners often find JSX confusing at first because it looks like HTML but has these subtle differences. This tool helps you build intuition by seeing the exact transformations applied to your own HTML.

Component scaffolding: When building a new React component, you can prototype the structure in plain HTML (easier to write quickly) and then convert it to JSX for your component file.

Tailwind CSS users: If you’re copying Tailwind examples from documentation or other sources, the class → className conversion is essential before pasting into React.

Frequently Asked Questions

Why can’t I use class in JSX? JSX is compiled to JavaScript by tools like Babel and TypeScript. In JavaScript, class is a reserved keyword used to define ES6 classes (class MyComponent {}). To avoid the ambiguity, React chose className as the JSX prop name, which maps to the DOM className property.

Why does style need to be an object in JSX? React passes props to DOM elements through JavaScript. The DOM’s element.style property is an object (CSSStyleDeclaration), not a string. By requiring an object in JSX, React can efficiently apply styles without parsing CSS strings. This also provides type safety when using TypeScript.

Do I need to update the converted event handlers? Yes. The converter wraps inline handler strings in arrow functions as a starting point, but in real React code you should define handler functions in your component and reference them: onClick={handleClick} instead of onClick={() => { handleClick() }}. Inline JavaScript in onclick="" attributes is an antipattern in React.

What happens to <!DOCTYPE html>? The <!DOCTYPE> declaration is an HTML document directive, not an element. It has no meaning in JSX (which describes component subtrees, not full HTML documents). The converter removes it and shows a warning.

Does the converter handle SVG? Yes. The converter handles SVG attribute name transformations as well, converting hyphenated SVG attributes like stroke-width, fill-opacity, and clip-path to their camelCase JSX equivalents.

Is my HTML sent to a server? No. All conversion happens entirely in your browser using JavaScript. Nothing is uploaded or transmitted to any server. Your code stays private.