HTML to JSX
Convert HTML to correct React JSX — full DOM & SVG attribute renaming (readOnly, tabIndex, strokeWidth), event handlers, idiomatic booleans, style objects. Live, with a conversion summary.
About this ToolHow it works, benefits & use casesTap to collapse
Paste a block of HTML and this converter rewrites it as React-correct JSX as you type. It renames the full set of DOM and SVG attributes to their camelCase React names — class becomes className, for becomes htmlFor, and readonly, tabindex, maxlength, stroke-width, fill-rule, clip-path and dozens more are mapped accurately rather than left as invalid props. Inline style strings are parsed into JSX style objects with camelCased keys (including vendor prefixes and CSS custom properties), event attributes like onclick become onChange-style handlers, void elements such as img and input are self-closed, HTML comments turn into {/* … */}, and common named entities are decoded. You choose double or single quotes, idiomatic bare booleans or explicit ={true}, and whether to wrap the result in a fragment or a full component. Everything runs in your browser with a live conversion summary — no upload, no sign-up.
How to Use
- 1Set your options first: pick double or single attribute quotes, choose whether to wrap the output in a fragment or a named component, and toggle "Explicit booleans" if you want disabled={true} instead of a bare disabled.
- 2Paste your HTML into the input panel, or click "Load example" to drop in a sample card with styles, SVG, entities and boolean attributes.
- 3The JSX regenerates live as you edit — press "Convert to JSX" to validate non-empty input.
- 4If you chose the component wrapper, type a component name; it is sanitised to a valid PascalCase identifier and used for the download filename.
- 5Review the conversion summary to see counts of renamed attributes, styles, comments and self-closed elements, then copy, download, or share the JSX.
Key Benefits
- Renames the complete React DOM attribute set plus SVG presentation attributes (strokeWidth, fillRule, clipPath, and more)
- Converts inline style="" strings into proper JSX style objects, handling vendor prefixes and --custom-properties
- Rewrites event attributes like onclick and ondblclick to onClick and onDoubleClick
- Self-closes void elements and converts HTML comments to JSX comment syntax
- Idiomatic bare booleans by default, or explicit ={true} when you prefer it
- Optional fragment or full-component wrapper with a sanitised PascalCase name
- Live preview, a per-conversion summary, and shareable output URLs — all in-browser
Common Use Cases
- Porting a static HTML template or design export into a React component
- Fixing invalid props (class, for, readonly, tabindex) when pasting markup into JSX
- Converting inline-styled snippets into React style objects without hand-editing
- Migrating SVG icons into React where kebab-case attributes break the build
- Scaffolding a component file directly from HTML with the component wrapper option
Options
disabled={true} instead of idiomatic bare disabled
0 characters · live
Paste HTML above to see the converted JSX.
Attribute reference
Was this tool helpful?
Share Your Experience
Help others discover this tool!
Related tools
- SVG to React ComponentConvert SVG to a clean TSX/JSX/React Native component — currentColor, prop spread, forwardRef, memo, live preview
- Color ConverterConvert between HEX, RGB, HSL, and HSV
- Component Name GeneratorTurn a description into ranked, kind-aware component names with a file scaffold and a name validator (casing, collisions, clarity)
- cURL to Code ConverterConvert cURL commands to code in various languages
- npm to Yarn ConverterConvert npm commands and package-lock.json to Yarn equivalents
- Postman to cURL ConverterConvert Postman requests to cURL commands
Yes. SVG presentation attributes are renamed to their React forms — stroke-width to strokeWidth, fill-rule to fillRule, clip-path to clipPath, stop-color to stopColor, and many others — along with xlink:href to xlinkHref. This is important because React rejects the kebab-case SVG attribute names, so pasting raw SVG markup into JSX usually breaks without this conversion.
A style="color: red; font-size: 14px" attribute becomes a JSX style object such as style={{ color: "red", fontSize: "14px" }}. Property names are camelCased, vendor prefixes like -webkit- are capitalised (with -ms- left lowercase to match React), and CSS custom properties (--var) are kept as quoted string keys.