HTML & SVG to JSX
Convert HTML / SVG snippets into React JSX — class→className, style strings to objects, self-closing tags and entities handled; perfect for pasting designer SVGs.
>_ USAGE GUIDE
Convert HTML or SVG snippets into React JSX: class becomes className, style strings become objects, and self-closing tags and entities are handled. Moving a designer-exported SVG or a chunk of existing HTML into a React component saves a lot of hand renaming.
The key JSX/HTML differences matter here: most attributes are camelCased (e.g. tabindex to tabIndex), style changes from a string to a JSON object, reserved words are renamed (for to htmlFor) and hyphenated attribute names become camelCase (SVG's stroke-width to strokeWidth). This tool performs these lexical transforms without guaranteeing semantic equivalence, so verify in React that no errors remain.
- Paste the HTML/SVG: drop in the source to convert
- Convert: run the transform
- Review attributes and the style object: check camelCased attributes and the style object
- Copy as JSX or a component: paste it into your React code
>_ FAQ
Q1 · How are class and style converted?
class becomes className (since class is reserved in React). style is converted from a CSS string into a JSX object, e.g. style="color: red; font-size: 12px" becomes style={{ color: 'red', fontSize: '12px' }}, with hyphenated property names such as font-size camelCased too.
Q2 · Can SVG be converted into a component?
Yes. After you paste an SVG snippet, the tool converts class, style and SVG-specific attributes (stroke-width to strokeWidth, fill-rule to fillRule) into JSX-friendly form, so the output drops straight into a component. If you want a component wrapper, add your function component and return around the result.
Q3 · Why does React still throw an error after conversion?
Because this is a lexical transform and does not guarantee semantic equivalence. Common leftovers: inline events still written as an onclick string, invalid attributes beyond custom data-*, or a style value the JSX object cannot take. Fix them by following React's error message; the tool only does the mechanical attribute-name and style conversion.
Q4 · How are comments and self-closing tags handled?
HTML comments are turned into JSX comment syntax ({/* ... */}) rather than keeping <!-- --> verbatim. Self-closing tags such as <img> and <br> are padded to <img /> and <br />, satisfying JSX's requirement that they self-close.
Q5 · How does it differ from the HTML entity and XML tools?
The purposes differ: the HTML entity tool (html) converts between entities like & and characters, the XML tool (xml) prettifies and validates structure, whereas this tool targets React JSX output, focusing on attribute camelCasing and style-to-object conversion. Use the others for entities and XML, and this tool for JSX.