HTML to JSX Converter
Paste HTML and get valid JSX instantly — class → className, for → htmlFor, inline styles → objects, void elements self-closed. Both panes are editable.
class → classNamefor → htmlForstyle → objectvoid → />events camelCased
HTMLeditable
JSXeditable
<div><div>
JSX output will appear here
How to use it
- 1Paste your HTML into the left panel.
- 2The JSX output appears instantly on the right.
- 3Click Copy to copy the JSX, then paste it into your React component.
Common use cases
- Migrate an existing HTML template or Bootstrap component into a React project.
- Convert HTML email templates or landing pages into JSX for use with a React-based framework.
- Fix common JSX pitfalls (class, for, inline style strings) in a snippet from Stack Overflow or an HTML generator.
- Speed up converting designer-exported HTML into React component code.
Frequently asked questions
- What transformations does this tool apply?
- It renames class to className, for to htmlFor, tabindex to tabIndex, and all other reserved HTML attributes to their JSX equivalents. It converts inline style strings to style objects, self-closes void elements (img, br, input, etc.), and camelCases event handler names (onclick → onClick).
- Does it handle SVG?
- Basic SVG attributes are converted where they match the JSX mapping. Complex SVG with namespace prefixes (xmlns:xlink) may need minor manual cleanup.
- Is there a size limit?
- No hard limit — conversion is synchronous and runs in your browser. Very large HTML documents will still convert instantly for typical use cases.
- Will it generate a full React component?
- No. The tool converts the HTML markup to JSX syntax only. Wrapping it in a function or class component is left to you.
Try next
HTML Live Preview
Write HTML, CSS, and JavaScript and see the result instantly.
HTML ↔ Markdown Converter
Convert HTML to Markdown or Markdown to HTML with a live preview. GFM tables, fenced code blocks, inline formatting. Free, in your browser.
HTML, CSS & JS Minifier
Minify HTML, CSS, and JavaScript online — strip comments, collapse whitespace, and see byte-size savings. Runs entirely in your browser.