HTML to JSX/TSX Converter
Convert HTML to JSX with automatic attribute renaming, style object conversion, and self-closing tags. Also converts CSS to JS style objects.
HTML → JSX Rules
class → classNamefor → htmlForonclick → onClickstyle="..." → style={{...}}<br> → <br /><!-- --> → {/* */}HTML Input
JSX Output
Output will appear here…Frequently Asked Questions
What changes between HTML and JSX?
JSX uses camelCase attributes (className instead of class, htmlFor instead of for, onClick instead of onclick), self-closes void elements (<br />, <img />), and replaces the style string with an object (style={{color: 'red'}}). Tip: this converter handles all common transformations automatically.
How do I use inline styles in JSX?
Replace style="color: red; font-size: 14px" with style={{color: 'red', fontSize: '14px'}}. CSS property names become camelCase and values are strings. Numeric values for pixel properties can omit 'px'. Tip: for complex styles, extract them into a const or use a CSS-in-JS library.
What is the difference between JSX and TSX?
TSX is JSX with TypeScript type annotations. The syntax is identical, but TSX files (.tsx) are type-checked. Tip: when converting HTML to TSX, you may also need to add type annotations for props and event handlers (e.g., React.ChangeEvent<HTMLInputElement>).
How do I handle SVG in JSX?
SVG attributes like stroke-width, fill-opacity, and xmlns:xlink must be converted to camelCase: strokeWidth, fillOpacity, xmlnsXlink. Class becomes className. This converter handles SVG attributes automatically. Tip: for complex SVGs, consider using SVGR to convert them into full React components.
Can I use HTML comments in JSX?
No, HTML comments (<!-- -->) are not valid in JSX. Use JavaScript comments instead: {/* comment */} for inline comments or {/* multi-line */} inside JSX expressions. Tip: this converter automatically transforms HTML comments to JSX comment syntax.