HTML to JSX Converter
Convert HTML to React JSX. Transforms class to className, inline styles to objects, event handlers, comments, and self-closing tags.
About this tool
The HTML to JSX Converter transforms standard HTML into React JSX syntax — the format used in React, Next.js, and other JSX-based frameworks. Paste any HTML snippet and it automatically handles the syntax differences that would otherwise be manual and error-prone.
Key transformations: class becomes className, for becomes htmlFor, inline CSS style="color: red; font-size: 16px" becomes the JSX object style={{ color: 'red', fontSize: '16px' }} with automatic kebab-to-camel conversion. Event handlers like onclick become onClick and their string values are wrapped in arrow functions. HTML comments <!-- comment --> become JSX comments {/* comment */}, and void elements like <img> and <br> receive the self-closing /> syntax.
Example input: <div class="card"><h1 data-onclick="alert('hi')">Hello</h1><input disabled></div>
Example output: <div className="card"><h1 onClick={() => { alert('hi') }}>Hello</h1><input disabled={true} /></div>
With auto-convert enabled, the output updates as you type. The converter also handles boolean attributes (disabled, checked, required, readOnly) and SVG hyphenated attributes correctly.
FAQ
What happens to inline event handlers like data-onclick="doSomething()"? ›
The attribute name is converted to camelCase (onClick) and the value is wrapped in an arrow function: onClick={() => { doSomething() }}. This produces valid JSX that calls the handler when clicked — you may want to replace the function body with a reference like onClick={doSomething} afterwards.
How are inline styles handled? ›
CSS properties in the style string are automatically converted from kebab-case (background-color) to camelCase (backgroundColor). Numeric values with units (16px, 2em) are kept as strings. Unitless numeric values on properties like zIndex, opacity, and flexGrow are output as bare numbers. The entire style attribute becomes a JSX style object: style={{ color: 'red', fontSize: '16px' }}.
Does it handle SVG markup? ›
Yes. SVG elements and hyphenated SVG attributes (stroke-width, fill-opacity) are preserved since React 16+ accepts them directly. The viewBox attribute is correctly converted to viewBox (camelCase), and self-closing tags are handled for all SVG void elements.
What if I only need to convert SVG to JSX? ›
Use the <a href="/svg-to-jsx">SVG to JSX Converter</a> — it handles SVG-specific attributes and offers a component wrapper option that generates a full React functional component with width, height, and fill props.
What about data-* and aria-* attributes? ›
Data attributes (data-testid, data-value) and ARIA attributes (aria-label, aria-expanded) are left unchanged — they use the same hyphenated format in both HTML and JSX.