HTML attributes are reserved words in JSX

The obvious copy–paste doesn't work. HTML class is a reserved keyword in JavaScript, and for conflicts with loop syntax. React also insists on camelCase for dozens of hyphenated attributes — tabindex, readonly, autocomplete, and all the SVG ones like stroke-width. Take this:

<div class="card" tabindex="0"><label for="email">Email</label><input type="email" autocomplete="email" /></div>

Pasting that into a React component throws errors. The attributes need renaming before the JSX parses.

Inline styles become object literals

HTML uses strings: style="background-color: #4f46e5; padding: 8px 12px;". JSX demands objects: style={{backgroundColor: '#4f46e5', padding: '8px 12px'}}. The CSS property names are camelCased, numeric values without units stay unquoted, and strings are JSON-escaped. This tool walks every inline style and converts it.

Void elements get self-closed

HTML allows <img src="logo.png"> as valid markup, but JSX requires <img src="logo.png" />. The tool detects all fifteen void elements — area, base, br, col, embed, hr, img, input, link, meta, param, source, track, wbr — and adds the slash if missing.

What stays as-is

HTML comments are stripped (JSX expects {/* */} instead). Event handlers like onclick stay unchanged — you'll rename them by hand to onClick. Data attributes (data-*), ARIA attributes (aria-*), and custom attributes pass through untouched. Script tags are left alone. This tool converts only attribute names and inline styles, not JavaScript event binding or semantic restructuring.

Start with static HTML. See also: JSON to Go Struct Converter.