Convert HTML to React JSX online. Automatically handles className, htmlFor, camelCase attributes, style objects, and self-closing tags. Free, no login, local processing.
TL;DR: Free online HTML to JSX converter. Automatically converts class to className, for to htmlFor, and inline styles to React style objects. Supports copy and download. Runs locally, no data leakage.
This tool runs entirely in your browser. Open DevTools → Network panel and search your input — it appears in no request.
Next steps
Usage Guide
HTML copied from designs or legacy pages breaks in React: class is not className, for is not htmlFor, and style is still a string. This tool rewrites common HTML attributes into JSX form, fixes void tags, and turns inline style strings into style objects — 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, and more.
- Inline style="a: b" becomes style={{ a: b }}; copy into your component.
2. What gets handled automatically
onclick="..." does not become onClick={handler} automatically — JSX needs a function reference. Rewrite inline handlers into React events and move scripts out of the markup.
- DOM attribute camelCase: maxLength, readOnly, autoComplete, colSpan, crossOrigin, and many more.
- style strings → JS objects; unitless numeric CSS values drop quotes (e.g. width: 100).
- Void elements like img / input / br become self-closing /> forms.
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.
- Comments, conditional comments, IE-only tags: unsupported in React — remove or rewrite.
- Dense SVG attributes (stroke-width, ...) may still need camelCase by hand.
- 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.
FAQ
Completely free, no registration required. Paste HTML in your browser to convert to JSX — all operations run locally.
Automatically converts class to className, for to htmlFor, tabindex to tabIndex, readonly to readOnly and other camelCase attributes React requires, plus inline style string to object.
No. Conversion runs locally in your browser; your data is never sent to any server, ensuring privacy.
Related Tools
Related Articles
Complete Guide to HTML to JSX Conversion for React Developers
Understand the key differences between HTML and JSX, master className, style objects, camelCase attributes, and quickly migrate HTML snippets into React projects.
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.