HTML & SVG to React

Two markup-to-React conversions in one place. Paste plain HTML to get JSX that drops straight into a component (class becomes className, for becomes htmlFor, every attribute is camelCased, inline style strings turn into style objects, void tags self-close, and comments become JSX comments). Or switch to SVG mode to wrap an exported icon in a ready-to-import function component, named how you like, in JavaScript or TypeScript, with {...props} forwarded onto the root svg and an optional React.memo wrapper. It all runs in your browser, so nothing you paste is uploaded.

Code

Turn web markup into React. Paste plain HTML to get JSX you can drop into a component (class → className, attributes camelCased, inline styles into objects, void tags self-closed), or paste an SVG to get a ready-to-import component with {...props} forwarded. All in your browser.

HTML Input

JSX Output

HTML to JSX

Paste plain HTML and the converter parses it into a tree, then prints it back as JSX. React renames a handful of attributes (class to className, for to htmlFor) and expects the rest in camelCase (stroke-width to strokeWidth, cellpadding to cellPadding), while data- and aria- attributes stay untouched. Inline style attributes become a style object with camelCased keys, void tags like <br> and <img> self-close, and HTML comments turn into JSX comments.

SVG to a React component

Switch to SVG mode and an exported icon comes back wrapped in a function component. You name it, pick JavaScript or TypeScript, and decide whether to forward props and wrap the export in memo. Attributes are camelCased the way JSX wants them (fill-rule to fillRule, clip-path to clipPath), so a Figma or Illustrator export becomes a usable component in seconds.

About the forwarded props

In SVG mode with prop forwarding on, {...props} is placed last on the root svg element so anything the caller passes (a new width, a color, a className, an onClick) overrides the SVG's baked-in values. In TypeScript mode the props are typed as SVGProps<SVGSVGElement>, the same type React uses for a native svg.