HTML to JSX Converter

Paste HTML and get valid JSX back. The converter handles all the differences between HTML and JSX: class becomes className, for becomes htmlFor, inline styles become objects, self-closing tags get proper slashes, and HTML entities are converted. SVG attributes like stroke-width become strokeWidth.

HTML to JSX — Convert HTML markup to React JSX — attributes, inline styles, SVG props, entities, fragments

What it does

▸Converts HTML to JSX with proper React attribute names (className, htmlFor)
▸Converts inline style strings to React style objects (style={{color: 'red'}})
▸Handles SVG attribute names (stroke-width → strokeWidth, fill-opacity → fillOpacity)
▸Converts HTML entities to their JSX equivalents
▸Wraps multiple root elements in React fragments (<>)
▸Adds self-closing slashes to void elements (<img />, <br />)

Use cases

▸Converting an HTML template from a design into a React component
▸Pasting HTML from a web page into a React project
▸Converting SVG markup to JSX for inline React SVG components
▸Migrating HTML prototypes to JSX during a React rewrite

How it works

Paste your HTML into the input pane

The converter transforms it to valid JSX syntax

Attributes, styles, and entities are converted automatically

Copy the JSX output into your React component

Frequently asked questions

1How does it handle inline styles?

HTML inline styles like style="color: red; font-size: 14px" are converted to React style objects: style={{color: 'red', fontSize: '14px'}}. CSS property names are converted from kebab-case to camelCase.

2Does it handle SVG?

Yes. SVG attributes that use kebab-case in HTML (stroke-width, stroke-linecap, fill-opacity) are converted to their React camelCase equivalents (strokeWidth, strokeLinecap, fillOpacity).

3What about multiple root elements?

JSX requires a single root element. If your HTML has multiple root elements, the converter wraps them in a React fragment (<>...</>) so the output is valid JSX.