⚛

HTML → JSX Converter

Convert HTML to React JSX. Transforms class→className, for→htmlFor, inline styles to objects, self-closes void elements, and more.

Wrap in fragment Wrap as component

HTML Input

JSX Output

What Gets Converted

${[ ['class=', 'className='],['for=','htmlFor='],['tabindex=','tabIndex='], ['readonly','readOnly'],['maxlength=','maxLength='],['onclick=','onClick='], ['onchange=','onChange='],['style="..."','style={{...}} (object)'], ['
','
'],['',''],['',''], ['','{/* */} (JSX comment)'],['HTML entities','Unicode chars'], ['xlink:href','href (SVG)'], ].map(([from,to])=>`

${from} → ${to}

`).join('')}

About HTML to JSX Converter

HTML to JSX Converter automatically transforms standard HTML into valid React JSX syntax. It handles the most common pitfalls: renaming class to className and for to htmlFor, converting inline style strings into JavaScript style objects with camelCased properties, self-closing void elements like <br>, <img>, and <input>, converting HTML event attributes like onclick to their React camelCase equivalents (onClick), and replacing HTML comments with JSX comment syntax {/* */}.

The output can optionally be wrapped in a React fragment (<>...</>) or a full functional component scaffold. The conversion runs entirely in your browser — no code leaves your machine, making it safe for proprietary component markup.

Common Use Cases

Migrating HTML templates from a static site or CMS into React components without manual attribute renaming
Converting design-tool exports (Figma HTML, Bootstrap snippets) into JSX-compatible markup quickly
Cleaning up copy-pasted HTML from Stack Overflow or documentation before adding it to a React project
Learning React JSX syntax by seeing exactly which HTML attributes map to which JSX equivalents

How to Use

Paste your HTML into the left panel or click "Load Example" to try a sample snippet
The converter runs automatically on input — or click "Convert to JSX" to trigger it manually
Toggle "Wrap in fragment" to add a React fragment wrapper, or "Wrap as component" for a full function component
Review the change badges that appear above the panels, then click "Copy JSX" to copy the output

Frequently Asked Questions

How does the style conversion work?

When the converter encounters a style="..." attribute, it splits the CSS string on semicolons, converts each property name from kebab-case to camelCase (e.g. font-size → fontSize), and wraps the result in a double-brace JavaScript object expression: style={{fontSize: '14px', color: '#333'}}. String values are quoted; numeric pixel values remain as strings.

Does the converter handle SVG attributes like stroke-width or xlink:href?

Yes. SVG-specific attributes such as stroke-width, fill-opacity, stop-color, and font-size are mapped to their camelCase React equivalents (strokeWidth, fillOpacity, stopColor, fontSize). The deprecated xlink:href is converted to simply href, which React supports for SVG elements in modern versions.

Will the converted JSX work without any further changes?

For most standard HTML, the output will be valid JSX that compiles without errors. However, complex cases — deeply nested templates with dynamic bindings, custom web components, or non-standard attributes — may require manual review. The converter covers the most common attribute mappings but does not execute or validate the JSX against a live React runtime.