HTML to JSX
Convert HTML into JSX for React: className and htmlFor, camelCase SVG attributes, inline styles as objects, and void elements self-closed.
Local workspace
Named projects in IndexedDB · Local only — never synced to our servers. Worksp…
Batch workspace
Format multiple files locally in one run.
Pasting HTML into a React component fails on details: class and for are reserved words, every attribute with a hyphen needs camelCase, the style attribute has to become an object, and void elements like img must close themselves. This converter walks the markup with its own parser, so it works the same in your browser as on a server, and fixes each of those. It keeps data-* and aria-* attributes exactly as they were, turns CSS custom properties into quoted keys, converts comments into JSX expression comments, and escapes braces in text so nothing is mistaken for JavaScript.
Common errors and fixes
Adjacent JSX elements must be wrapped in an enclosing tag
The snippet has more than one root element. This converter adds a fragment automatically; keep it, or wrap the markup in a container element.
Warning: Invalid DOM property `class`. Did you mean `className`?
Raw HTML attributes were pasted straight into a component. Convert the markup first so class, for, and tabindex are renamed.
The `style` prop expects a mapping from style properties to values
A style attribute is still a string. Converted markup writes it as an object, so replace style="..." with the generated style={{ ... }}.
Expected corresponding JSX closing tag
An element in the source was never closed. The converter closes them, so re-convert the original HTML rather than hand-editing the JSX.
Options
| Option | Description |
|---|---|
| Wrap in a component | Wraps the JSX in an exported function component, ready to paste into a new file. |
| Component name | Name of the generated component. |
FAQ
Which attributes get renamed?
class becomes className and for becomes htmlFor, because both are reserved words in JavaScript. Attributes like tabindex, readonly, and colspan become camelCase, and hyphenated SVG attributes such as stroke-width become strokeWidth. data-* and aria-* keep their hyphens.
How is the style attribute converted?
Into an object, since JSX expects one: font-size: 14px becomes fontSize: "14px". Vendor prefixes become WebkitTransition or msTransform, and CSS custom properties keep their exact name in quotes, as "--gap".
Why do img and br end with a slash?
JSX has no void elements, so every tag must close. Elements that can't have children are written self-closed, and tags left unclosed in the HTML are closed for you so the result parses.
What happens to comments and curly braces?
An HTML comment becomes a JSX expression comment, {/* like this */}. A brace in text is escaped as an expression, because a bare { would start JavaScript inside JSX.
Can I paste a whole page?
Yes, but JSX must return a single element. Several top-level elements are wrapped in a fragment automatically, and the doctype is dropped since a component can't contain one.