HTML to JSX Converter
Convert HTML or SVG to JSX for React: class to className, inline styles to objects, camelCase attributes, self-closing tags and JSX comments.
Free · No sign-up · Your inputs stay in your browser
Input
Convert HTML to JSX
Output
JSX
0 characters
class and for become className and htmlFor, inline styles become objects with camelCase properties, hyphenated SVG attributes become camelCase, void tags self-close and comments become {/* */}. Inline event handlers cannot be translated to functions, so they are left as stubs with the original code in a comment.
Runs in this browser. Nothing you paste is sent to a server.
About this tool
Method, assumptions, practical next steps, and limits.
The differences that break a paste
JSX is JavaScript, so attribute names follow the DOM property names rather than HTML's, style takes an object, every element must be closed and braces in text have to be escaped. React's Writing Markup with JSX guide lists the rules. data- and aria- attributes keep their hyphens.
Event handlers
An inline onclick="..." is a string of code, and React expects a function, so handlers are converted to empty arrow functions with the original code in a comment. Move the logic into the component by hand.