HTML to JSX Converter

Paste plain HTML and get JSX that drops straight into a React component. The reserved attributes get renamed (class to className, for to htmlFor), every attribute is camelCased (stroke-width to strokeWidth, tabindex to tabIndex), inline style strings turn into style objects, void tags like <br> and <img> self-close, and HTML comments become JSX comments. It runs entirely in your browser, so nothing you paste is uploaded.

Code

Paste plain HTML and get JSX you can drop straight into a React component. class becomes className, for becomes htmlFor, attributes are camelCased, inline style strings turn into style objects, and void tags self-close. All in your browser.

HTML Input

JSX Output

What this tool does

It parses your HTML into a tree, then prints it back out as JSX. React renames a handful of attributes (class, for) and expects the rest in camelCase, so the converter handles those for you and keeps data- and aria- attributes exactly as they are. Inline style attributes are split into a style object with camelCased property names, and elements that can't have children self-close.

Why you'd use this

Pasting markup from a design export, an email template, or a docs example into a React component means fixing every class, every dashed attribute, and every inline style by hand. That's tedious and easy to get wrong. Paste the HTML here, copy the JSX, and move on.

What gets converted

class becomes className and for becomes htmlFor. Hyphenated and known multi-word attributes are camelCased (cellpadding to cellPadding, stroke-width to strokeWidth), while data- and aria- attributes stay untouched. Inline styles become style objects, boolean attributes keep their JSX shorthand, comments turn into JSX comments, and SVG attributes are handled too.