How are inline styles converted?

HTML to React JSX Converter

Data Converters100% Client-Side

Convert standard HTML snippets into clean React JSX code with attribute mapping, style parsing, and self-closing tags.

Wrap in React Functional Component

HTML Input

React JSX Output

<div className="card-container" id="user-card" tabIndex="0">
  {/*  User Profile Header  */}
  <img src="/avatar.jpg" alt="User Avatar" className="rounded-full shadow-md" />
  <h2 className="title" style={{"color":"#4f46e5","fontSize":"1.25rem","marginTop":"10px"}}>Alex Johnson</h2>
  <p className="description">Senior Full-Stack Engineer</p>
  <div className="form-group">
    <label htmlFor="email-input">Email Address:</label>
    <input type="email" id="email-input" className="form-control" autoComplete="off" readOnly />
    <br />
    <button className="btn btn-primary" onclick="alert('Hello')">Contact Me</button>
  </div>
</div>

What is HTML to React JSX Converter?

Easily convert static HTML markup into clean, idiomatic React JSX code. Automatically handles class to className, for to htmlFor, inline style strings to objects, and self-closing void elements.

How to Use Online

1
Paste Raw HTML MarkupPaste your HTML code snippet, SVG icons, or page template into the editor.
2
Automatic Attribute NormalizationConverts class to className, for to htmlFor, and hyphenated attributes to camelCase.
3
Self-Close Void TagsEnsures void elements like <img />, <input />, <br />, and <hr /> are properly self-closed.
4
Copy Valid React JSX CodeClick Copy to paste the JSX directly into your React or Next.js components.

Key Features

Converts class to className and for to htmlFor
Parses inline CSS style strings into React style objects
Fixes unclosed void tags (img, input, br, hr)
Optional wrapping inside a React Functional Component

Common Use Cases

Porting HTML templates or Bootstrap components into Next.js/React
Converting third-party embed widgets into React components
Cleaning up pasted HTML snippets

Frequently Asked Questions

Kebab-case CSS properties like "background-color: #fff" are transformed into camelCase React objects like style={{ backgroundColor: "#fff" }}.