Question 1

What HTML attributes are converted?

Accepted Answer

The converter handles all common attribute transformations: class to className, for to htmlFor, tabindex to tabIndex, readonly to readOnly, maxlength to maxLength, contenteditable to contentEditable, and all other camelCase conversions required by React. Event handlers like onclick become onClick, onchange becomes onChange, and so on. Inline style strings are converted to JavaScript style objects with camelCased property names.

Question 2

How are inline styles converted?

Accepted Answer

HTML inline styles like style='color: red; font-size: 14px' are converted to JSX style objects: style={{color: 'red', fontSize: '14px'}}. CSS property names are camelCased to match the DOM style API. This is the format React expects for inline styles — plain CSS strings are not valid in JSX style props.

Question 3

Are HTML comments preserved?

Accepted Answer

HTML comments are converted to JSX comment syntax using {/* comment */} expressions. This allows you to preserve documentation and commented-out code when migrating HTML templates to React components. JSX comments must be JavaScript expressions, so plain HTML comment syntax is not valid in JSX.

Question 4

Do I need to wrap the output in a component?

Accepted Answer

The converter outputs the JSX markup only, without wrapping it in a React function component. You should paste the output inside your component's return statement. If the HTML has multiple root elements, wrap them in a React fragment using <> and tags, or use a single container element. JSX requires a single root element per component return.

HTML to JSX Converter

What is a HTML to JSX Converter?

How to Use PureFormatter

Frequently Asked Questions