Convert standard HTML to React-compatible JSX instantly. Transforms class to className, for to htmlFor, inline style strings to JavaScript objects, handles boolean attributes like disabled and checked, converts event handlers, ensures self-closing void elements, and wraps HTML comments in JSX syntax. Optionally generate a full React component with TypeScript. Free, private, runs entirely in your browser.
Automatically converts class to className, for to htmlFor, tabindex to tabIndex, and all other HTML attributes that differ in JSX. Event handlers like onclick become onClick.
Converts inline style strings to JavaScript style objects with camelCased property names. CSS like "font-size: 14px; color: red" becomes {{ fontSize: '14px', color: 'red' }}.
Handles boolean HTML attributes like disabled, checked, required, readonly, hidden, and more. Converts them to proper JSX boolean syntax automatically.
Optionally wrap the converted JSX in a full React component with import statements, TypeScript types, and a default export. Multiple root elements are automatically wrapped in Fragments.
HTML comments are converted to JSX comment syntax {/* comment */} so they remain in your code without causing compilation errors.
Everything runs in your browser using JavaScript. No data is sent to any server. Your HTML content stays completely private on your machine.
When migrating existing HTML templates, email designs, or web pages to React, you need to convert the HTML to JSX. While JSX looks very similar to HTML, there are important differences that cause compilation errors if not addressed. This tool automates all of the necessary transformations so you can paste HTML and get working JSX instantly.
class is a reserved word in JavaScript, so JSX uses className.for conflicts with JavaScript's for loop keyword, so labels use htmlFor.style="color: red" becomes style={{ color: 'red' }}.<img>, <br>, <input> must be self-closed: <img />.disabled in HTML becomes disabled (boolean) in JSX, not disabled="disabled".onclick becomes onClick, onchange becomes onChange, etc.<!-- ... --> become {/* ... */} in JSX.<>...</>) so the output is valid JSX without adding extra DOM nodes to your page.
style="color: red; font-size: 14px" are converted to JSX style objects like style={{ color: 'red', fontSize: '14px' }}. Property names are automatically camelCased and values are properly quoted as strings.
Check out our other free developer tools. Convert SVG to JSX, format HTML, generate TypeScript types, and more -- all from your browser.