<iframe src="https://devtoolbox.dedyn.io/tools/html-to-jsx" width="100%" height="600" frameborder="0" title="HTML to JSX Converter"></iframe>
HTML to JSX Converter
Paste HTML and get valid React JSX instantly. Converts class to className, inline styles to objects, self-closing tags, event handlers, SVG attributes, and more. Runs 100% in your browser.
Try:
JSX output will appear here...
About HTML to JSX Conversion
When migrating HTML templates to React components, you need to convert standard HTML into valid JSX syntax. While JSX looks similar to HTML, there are several important differences that must be addressed for your React code to compile correctly.
This converter handles all the common transformations automatically: renaming reserved word attributes, converting inline styles from CSS strings to JavaScript objects, ensuring all tags are properly closed, transforming event handlers to camelCase, and converting SVG-specific attributes.
JSX (JavaScript XML) is a syntax extension for JavaScript used in React. It lets you write HTML-like code inside JavaScript files, which React then transforms into regular JavaScript function calls. JSX looks similar to HTML but has important differences like using className instead of class, camelCase event handlers, and JavaScript expressions inside curly braces.
What are the main differences between HTML and JSX?▼
The main differences are: (1) class becomes className, (2) for becomes htmlFor, (3) inline styles use JavaScript objects with camelCase properties instead of CSS strings, (4) all tags must be closed including self-closing ones like <br />, <img />, and <input />, (5) event handlers use camelCase like onClick instead of onclick, (6) HTML attributes like tabindex become tabIndex, and (7) HTML comments become JSX comments wrapped in curly braces {/* comment */}.
Do I need to convert HTML to JSX for React?▼
Yes, if you want to use HTML markup in React components, you need to convert it to valid JSX. While plain HTML may partially work, React will throw warnings for attributes like class (should be className) and for (should be htmlFor). Inline styles must be JavaScript objects, all tags must be properly closed, and event handlers must use camelCase. This converter automates all those changes so you can paste HTML and get working JSX instantly.