HTML to React JSX
Transform raw HTML snippets into valid React JSX/TSX components. Auto-converts class to className and style objects.
How do I use HTML to React JSX?
Paste raw HTML5 markup or SVG code into the left pane, or click "Load Sample Data".
Toggle whether to wrap the output in a functional React/Next.js component (`export default function`).
Copy the valid JSX/TSX output with camelCase DOM attributes and React inline style objects.
What features does HTML to React JSX offer?
Converts HTML class attributes to the className format React requires
Renames the HTML for attribute to htmlFor so React forms work correctly
Turns inline CSS strings like style='color:red' into JS objects React can read
Fixes self-closing tags like img, input, and br so they work in JSX
Optionally wraps the output in a full React component you can use right away
HTML5 DOM Attribute to React JSX/TSX Property Mapping
React JSX binds to DOM object properties rather than HTML string attributes, requiring specific camelCase and reserved-word transforms.
| HTML5 Attribute | React JSX Prop | Underlying DOM Property | Conversion Rule |
|---|---|---|---|
| class="btn primary" | className="btn primary" | Element.className | JS reserved keyword `class` avoidance |
| for="email-input" | htmlFor="email-input" | HTMLLabelElement.htmlFor | JS reserved keyword `for` avoidance |
| style="margin-top: 8px; --gap: 4px" | style={{ marginTop: "8px", "--gap": "4px" }} | HTMLElement.style (CSSStyleDeclaration) | CSS properties camelCased; custom vars quoted |
| tabindex="0" / readonly | tabIndex={0} / readOnly | HTMLElement.tabIndex / readOnly | Strict camelCase property matching |
| stroke-width="2" (SVG) | strokeWidth="2" | SVGElement attribute map | Hyphenated SVG attrs converted to camelCase |
| <!-- HTML comment --> | {/* JSX comment */} | Omitted from Virtual DOM | Wrapped in JS block comment expression |
Frequently Asked Questions about HTML to React JSX
How are inline CSS custom properties (`--theme-color`) converted into React style objects?
Standard CSS properties are converted to camelCase (`background-color` → `backgroundColor`), whereas CSS variables starting with `--` are preserved as quoted string keys (`{ "--theme-color": "#3b82f6" }`) as required by React `CSSProperties`.
Why must void HTML elements like `<img>`, `<input>`, and `<br>` be self-closed in JSX?
HTML5 permits unclosed void tags (`<br>`), but JSX is an XML-like syntax extension to JavaScript (`React.createElement`). Every tag must either have a matching closing tag or end with `/>` (`<br />`).
Are `data-*` and `aria-*` attributes converted to camelCase in JSX?
No, React explicitly requires all `data-*` and `aria-*` attributes (such as `aria-label`, `aria-hidden`, `data-testid`) to remain lower-case hyphenated strings in compliance with WAI-ARIA and HTML dataset specs.
How are `<textarea>` default values and `<select selected>` attributes handled?
In React, `<textarea>text</textarea>` and `<option selected>` trigger controlled/uncontrolled warnings. The converter maps them to `defaultValue` and `<select defaultValue="...">` props automatically.
Explore Related Developer Tools
TypeScript & TSX Code Formatter
Format and beautify TypeScript (.ts) and React TSX (.tsx) code locally in your browser using the Prettier TypeScript AST parser.
cURL to Code Converter
Convert cURL commands into JavaScript (Fetch, Axios), Python (requests, httpx), Go, Rust, and PHP code.
cURL to JavaScript Fetch Converter
Transform cURL commands into modern JavaScript and Node.js 20+ Fetch API calls with typed headers and JSON.stringify payloads.
cURL to Axios Request Converter
Convert cURL commands into Axios request config objects (method, url, headers, data) for Node.js and TypeScript projects.
Code Formatter
Format and beautify JavaScript, TypeScript, HTML, CSS, and Python code online with Prettier engine.
Code Minifier
Minify and compress JavaScript, HTML, and CSS code online with Terser engine. Reduce payload size by up to 70%.