HTML to JSX Converter
Free tool No sign-up
About this tool
Paste HTML, get React JSX — converts class to className, for to htmlFor, void elements to self-closing, event handlers to camelCase, and inline styles to object syntax. Handles 50+ attribute conversions and edge cases.
Advertisement
How to use it
01
Paste HTML
Copy any HTML snippet — an element, a fragment, or a whole component — and paste it into the input panel on the left.
02
Live conversion
The converter walks your input, applies 50+ attribute renames, transforms styles and events, and outputs valid JSX on the right.
03
Review warnings
If the converter wraps an inline handler or flags a <style>/<script> block, the warnings panel will explain what needs manual review.
04
Copy into your component
Use Copy for plain JSX or Copy with imports to prepend an import React line for legacy React 16 setups.
Attribute renames (selected)
| HTML | JSX | Note |
|---|---|---|
class="card" | className="card" | The flagship rule everyone googles. |
for="email" | htmlFor="email" | On |
tabindex="0" | tabIndex="0" | All hyphenated/lowercase attrs go camelCase. |
readonly | readOnly | Boolean attrs gain camelCase. |
maxlength="50" | maxLength="50" | Same pattern for minlength, colspan, rowspan. |
autocomplete="email" | autoComplete="email" | Form attributes go camelCase. |
contenteditable | contentEditable | Content-editing attrs follow the rule. |
http-equiv="..." | httpEquiv="..." | Hyphens collapse and the next letter goes uppercase. |
Transformations at a glance
Inline style → object syntax
<div style="background-color: #f0f; padding: 12px"></div> <div style={{ backgroundColor: "#f0f", padding: "12px" }}></div> Event handlers → camelCase + expression
<button onclick="save()">Save</button> <button onClick={save}>Save</button> Void elements → self-closing
<input type="email" name="email"> <input type="email" name="email" /> HTML comment → JSX comment
<!-- a note --> {/* a note */} SVG attributes → camelCase
<path stroke-width="2" stroke-linecap="round"/> <path strokeWidth="2" strokeLinecap="round" /> Void elements made self-closing
JSX requires every void HTML element to self-close. The converter handles all 15:
<br><hr><img><input><meta><link><source><area><base><col><embed><param><track><wbr><keygen> Gotchas and edge cases
01
Inline scripts and styles aren't parsed
The body of <script> and <style> blocks gets wrapped in a template literal and flagged. Real conversion needs you to move CSS to a stylesheet or styled-components and JS into the component body.
02
Complex inline event handlers
onclick="fn()" becomes onClick={fn}. Anything more complex (e.g. onclick="this.classList.toggle('x')") is wrapped in an arrow function with a TODO comment — review and rewrite as a real handler.
03
CSS custom properties in style
style="--brand: red" becomes style={{ "--brand": "red" }} — the key stays kebab-case and is quoted, because JSX needs a string key for hyphenated identifiers.
04
Multi-root output
If your HTML has multiple sibling root elements, the converter wraps the output in a Fragment <>…</>. React 16+ accepts this; older versions need an explicit React.Fragment.
05
HTML entities and data-/aria- attributes
Entities like & pass through unchanged — React renders them correctly. data-* and aria-* attributes keep their hyphens, since JSX accepts both forms.
06
SVG long-tail attributes
The most common SVG attributes (stroke-width, stroke-linecap, fill-rule, clip-path) get camelCased. Rare SVG attrs pass through as-is — React often normalises them at render, but check the React DOM elements reference if behaviour seems off.
Related tools
Advertisement