The HTML to JSX Converter takes any snippet of HTML and turns it into valid JSX you can paste directly into a React component. It renames reserved attributes (class → className, for → htmlFor), converts kebab-case DOM attributes to camelCase, self-closes void elements (<br>, <img>, <input>), parses inline style strings into React style objects, converts HTML comments to JSX comments, and strips inline event handlers so nothing silently breaks at runtime. Optionally wraps output in a fragment or a full React function component.
What does an HTML to JSX converter do?
JSX looks almost identical to HTML, but not quite: class is a reserved word in JavaScript, so React renamed it to className. for becomes htmlFor. Every kebab-case DOM property (tab-index, stroke-width, cell-padding) is camelCased in React. Inline style attributes take a JavaScript object, not a semicolon-separated string. Void tags like <br> and <img> must be self-closed. Paste any HTML snippet — a marketing landing page, a design-system component, a form, an SVG icon — and this tool applies every one of those rules for you in a single pass.
How the converter works
- Your HTML is parsed with the browser's native
DOMParser, so tag nesting and attribute quoting behave exactly like they would in a real page. - The DOM tree is walked recursively. For each element the tool remaps reserved attribute names, camelCases kebab-case and SVG attributes, and preserves
data-*andaria-*attributes verbatim. - Inline
stylevalues are split on;, each property is camelCased, and numeric values are kept unquoted so you can drop the result into a Reactstyle={{ … }}prop. - Void elements are emitted with a trailing
/, HTML comments become{/* … */}, and inline event handlers likeonclick="…"are stripped with a warning so you don't ship broken code. - Optionally, the output is wrapped in a JSX fragment or a full
export function Component() { return (…); }scaffold.
Which HTML attributes get renamed?
The most common renames are class → className and for → htmlFor. Beyond those, React expects camelCase for every multi-word DOM property: tabindex → tabIndex, readonly → readOnly, maxlength → maxLength, cellpadding → cellPadding, colspan → colSpan, rowspan → rowSpan, usemap → useMap, contenteditable → contentEditable, crossorigin → crossOrigin, autocomplete → autoComplete, autofocus → autoFocus, spellcheck → spellCheck, srcset → srcSet, enctype → encType, formnovalidate → formNoValidate, referrerpolicy → referrerPolicy, and many more. SVG attributes follow the same rule: stroke-width → strokeWidth, fill-rule → fillRule, clip-path → clipPath. data-* and aria-* attributes stay as-is because React accepts them verbatim.
Inline styles: from string to object
HTML lets you write style="padding: 16px; background-color: #f5f5f5;". In JSX that same style has to be a JavaScript object with camelCase keys: style={{ padding: '16px', backgroundColor: '#f5f5f5' }}. The converter handles this automatically: it splits the declaration list, camelCases each property (skipping CSS custom properties like --brand-color, which stay quoted), and keeps bare numeric values unquoted so React can apply them as pixel values. Turn the toggle off if you'd rather keep the raw string and convert manually later.
Wrap in a fragment or a full component
By default, the output is a bare JSX tree. If your snippet has multiple sibling elements, React requires them to be wrapped in a fragment or a single parent — flip the Wrap toggle to <> fragment and the tool will do it for you. Choose React component to emit a complete export function MyComponent() { return (…); } scaffold you can paste straight into a new .tsx file. The component name field lets you customise the identifier; the first character is auto-capitalised because React component names must start with a capital letter.