HTML to JSX Converter
Convert HTML to JSX for React components instantly. Transforms class to className, style strings to objects, and self-closes void elements. Free online tool.
Reference
What changes from HTML to JSX?
JSX is a syntax extension for JavaScript used by React to describe UI. While it looks like HTML, JSX has important differences because it compiles to JavaScript function calls. This tool automatically applies all the required transformations: class → className, for → htmlFor, inline style strings → camelCase style objects, boolean attributes → explicit JSX booleans, tabindex → tabIndex, and other attribute renames. Void elements (<img>, <br>, <input>, <hr>) are self-closed with />.
JSX conversion rules
Key transformations this converter performs: Attribute renames — class → className, for → htmlFor, tabindex → tabIndex, readonly → readOnly, maxlength → maxLength. Style objects — style="color: red; font-size: 14px" becomes style={{ color: 'red', fontSize: '14px' }}. Self-closing tags — <img src="..."> becomes <img src="..." />. Event handlers — onclick → onClick, onchange → onChange. Comments — HTML comments become JSX comment blocks {/* comment */}. Enable the TypeScript toggle to generate TSX-compatible output.
Privacy
All conversion runs 100% in your browser. No HTML data is sent to any server.