Which attributes get renamed?

class to className, for to htmlFor, tabindex to tabIndex, readonly to readOnly, colspan to colSpan, plus camelCase for all standard DOM properties and on* event handlers.

How does the style string get converted?

It is split on semicolons, each CSS property is camelCased, and the result is emitted as a JSX double-braced object. Vendor prefixes and custom properties are preserved.

Do data-* and aria-* change?

No. JSX accepts both in their kebab form, so the converter leaves them alone. Only standard DOM attributes are renamed.

Are HTML comments converted?

Yes. becomes a JSX expression {/* comment */} so the markup keeps the same intent without breaking the JSX parser.

What about scripts and inline event handlers?

The converter renames onclick to onClick and similar handlers, but the function body stays a string. You will typically rewrite it as a real React callback before shipping.

Is my HTML uploaded anywhere?

No. The transformation happens entirely in this browser tab. Toova has no view of what you paste — no analytics, no logs, nothing.

HTML to JSX — class, for, style, on-handlers

Paste HTML on the left, copy React-ready JSX on the right. The converter rewrites class to className, for to htmlFor, inline style strings to camelCase objects, and self-closes void elements like img and input so JSX can parse them.

Attribute and event remapping

React reuses DOM property names rather than HTML attribute names: tabindex becomes tabIndex, readonly becomes readOnly, colspan becomes colSpan. Inline event handlers move from onclick to onClick, onmouseover to onMouseOver, and so on for every standard handler. The two HTML-only renames are class to className and for to htmlFor, because both are reserved words in JavaScript.

Style strings to camelCase objects

JSX requires inline styles to be an object literal, with each CSS property camelCased. A style string like padding: 1rem; background-color: #fff becomes style={{ padding: '1rem', backgroundColor: '#fff' }}. The converter handles kebab-case to camelCase, vendor prefixes (-webkit-, -moz-, -ms-), and CSS custom properties (--brand-color stays as is, because JSX keeps them as quoted keys when needed).

Privacy and edge cases

The transformation runs in a single JavaScript function inside this tab. Your HTML never leaves the browser, which matters when you are porting markup with embedded customer data. The 14 void elements (img, input, br, hr, meta, link, area, base, col, embed, source, track, wbr, param) self-close in the output so JSX accepts them. Data- and aria- attributes are preserved as-is because they are already valid JSX.

Frequently Asked Questions

Which attributes get renamed?: class to className, for to htmlFor, tabindex to tabIndex, readonly to readOnly, colspan to colSpan, plus camelCase for all standard DOM properties and on* event handlers.
How does the style string get converted?: It is split on semicolons, each CSS property is camelCased, and the result is emitted as a JSX double-braced object. Vendor prefixes and custom properties are preserved.
Do data-* and aria-* change?: No. JSX accepts both in their kebab form, so the converter leaves them alone. Only standard DOM attributes are renamed.
Are HTML comments converted?: Yes.  becomes a JSX expression {/* comment */} so the markup keeps the same intent without breaking the JSX parser.
What about scripts and inline event handlers?: The converter renames onclick to onClick and similar handlers, but the function body stays a string. You will typically rewrite it as a real React callback before shipping.
Is my HTML uploaded anywhere?: No. The transformation happens entirely in this browser tab. Toova has no view of what you paste — no analytics, no logs, nothing.

HTML to JSX Converter

Attribute and event remapping

Style strings to camelCase objects

Privacy and edge cases

Frequently Asked Questions