HTML to JSX

Paste any HTML snippet and get React JSX output. Automatically converts attribute names, inline styles, self-closing tags, and SVG attributes.

Converts: class→ lassName, for→ tmlFor, tabindex→ abIndex, style strings→ SX objects, auto self-closes void elements (br, hr, img, input, etc.), SVG attributes→ amelCase. Wraps multiple root elements in a fragment.

🟢📖 Why Convert HTML to JSX?

JSX is the templating language used by React, Preact, and many other modern UI frameworks. While JSX looks like HTML, there are critical differences:

  • Attribute names use camelCase: class becomes className, for becomes htmlFor, tabindex becomes tabIndex.
  • Inline styles are JavaScript objects, not CSS strings: style="color:red" becomes style={{color:'red'}}.
  • Void elements must be self-closed: <img src="x"> becomes <img src="x" />.
  • SVG attributes use camelCase: stroke-width becomes strokeWidth, fill-opacity becomes fillOpacity.
  • HTML comments (<!-- -->) become JSX comments ({/* */}).

This converter handles all these transforms automatically so you can paste HTML directly from a design file or documentation and get production-ready JSX. Multiple root elements are automatically wrapped in a React Fragment <>...</>.

See also: Markdown Preview · cURL →Fetch · JSON →Code