Convert HTML to React JSX online. Automatically handles className, htmlFor, camelCase attributes, style objects, events, comments, and self-closing tags. Free, no login, local processing.
TL;DR: Free online HTML to JSX converter: className / htmlFor, style objects, camelCase events, HTML comments, and SVG attrs. Local convert with copy and download.
For local tools, open DevTools → Network and search your input — it should not appear in requests.
Next steps
Usage Guide
HTML copied from designs or legacy pages breaks in React: class is not className, for is not htmlFor, style is still a string, and onclick is not a JSX event. This tool rewrites common attributes, inline styles, events, and comments into JSX form, fixes void tags, and camelCases SVG kebab attrs — locally, for small fragment migrations.
1. Convert an HTML snippet
Conversion is regex-based attribute rewriting, not a full HTML parser. It works well on tidy fragments; clean broken markup or Vue/Angular templates before converting.
- Paste HTML on the left (load the sample to preview the behavior).
- JSX appears on the right: class→className, for→htmlFor, tabindex→tabIndex, charset→charSet, and more.
- Inline style, onclick, and <!-- comments --> are rewritten together; copy into your component and wire real handlers.
2. What gets handled automatically
After handlers become JSX expressions, confirm the functions exist in component scope and move global script-style calls onto React props or hooks.
- DOM camelCase: maxLength, readOnly (including boolean form without =), autoComplete, colSpan, crossOrigin, charSet, and more.
- style strings → JS objects (double or single quotes); margin-top becomes marginTop correctly.
- Events: onclick="handleClick()" → onClick={handleClick}; denser statements wrap as () => { ... }.
- <!-- comments --> → {/* comments */}; void tags like img / input / br become self-closing without doubling existing />.
- Common SVG kebab attrs (stroke-width, fill-opacity, clip-path) → camelCase; data-* / aria-* stay unchanged.
3. Still check by hand after convert
Next: HTML formatter for readability; HTML↔Markdown for docs. This page focuses on attribute-level changes that let JSX compile.
- Conditional comments and IE-only tags: unsupported in React — remove or rewrite.
- Broken markup with template interpolations or unescaped > can confuse the rewriter — format/clean first.
- If classes are CSS Modules / Tailwind already, confirm className matches project conventions.
- Large static pages belong in gradual componentization, not one-shot whole-site conversion.
4. Common pitfalls and edges
If warnings remain, follow the console “Did you mean …?” hints, hand-fix stragglers, or split the fragment and convert again.
- Hyphenated style keys that stay kebab-case are ignored or warned by React — this tool camelCases CSS property names.
- Tags already written as <img /> are not turned into <img / />.
- Boolean attrs written as readonly / autofocus become readOnly / autoFocus.
FAQ
Neither. It is a pure in-browser tool, free to use; the conversion relies on no backend service, and your HTML fragment is not submitted anywhere.
It converts class→className, for→htmlFor, tabindex→tabIndex, readonly→readOnly (including the valueless boolean form), charset→charSet, and other camelCase DOM attrs; inline style strings become objects; SVG kebab-case attributes such as stroke-width are camelCased; data-* and aria-* stay as-is.
Yes. onclick="handleClick()" becomes onClick={handleClick}; denser statements are wrapped in an arrow function. HTML comments <!-- ... --> become JSX {/* ... */}. Confirm the handler exists in your component after pasting.
No. Unclosed void tags are closed for you; tags already ending with /> are left alone, so you never get a doubled / />.
It is a heuristic conversion, so complex templates and comment edge cases still deserve a human review. Paste it in and let the project compile once to be sure, and keep the original HTML as a master copy for rollback. For very large fragments, try a trimmed sample first so the tab does not stall.
Related Tools
Related Articles
HTML to JSX Guide: Attributes, Styles, Events, and Comments
Walk through HTML vs JSX differences—className, style objects, camelCase props, events, and comments—and migrate design/legacy snippets into React with an online converter.
Unexpected token '<' is not valid JSON — 5 Reasons Your API Returned HTML Instead
fetch throws SyntaxError: Unexpected token '<' when the response body is HTML, not JSON. Covers the 5 root causes: SPA history fallback returning index.html, auth 302 redirects, gateway 502 error pages, wrong baseURL, and missing res.ok checks — with curl diagnostics.
HTML Table to JSON: How to Preserve Rows, Columns and Structure
Converting an HTML table from a web page to JSON — how to keep headers, handle merged cells and nested structure? Step-by-step with our HTML table to JSON tool.