What attributes does this convert?

It converts class to className, for to htmlFor, tabindex to tabIndex, all event handlers (onclick to onClick, etc.), inline styles to object syntax, and self-closes void elements like , , and .

Does it handle inline styles?

Yes. Inline style="color: red; font-size: 16px" is converted to style={{ color: 'red', fontSize: '16px' }} with camelCase property names.

Can I convert entire HTML pages?

You can paste any HTML snippet. For full pages, you may need to manually adjust the document structure for your React component hierarchy.

HTML to JSX Converter

Code Converters

Convert HTML markup to valid JSX for React

By DevToolHQ teamUpdated 2026-04-15100% client-sideMethodology

100% client-side processing

HTML Input

Conversions Applied

class → classNamefor → htmlFortabindex → tabIndexonclick → onClickstyle="..." → style={{...}}<br> → <br /><img ...> → <img ... />HTML comments removed

About HTML to JSX Converter

Converts standard HTML markup into valid JSX that React will accept without errors. The differences between HTML and JSX are numerous and subtle, and manually fixing them is tedious when converting existing templates or copying markup from design tools. The core transformations: class becomes className (since class is a reserved JavaScript keyword), for becomes htmlFor, tabindex becomes tabIndex, and all hyphenated event attributes (onclick, onmouseenter, onkeydown) become camelCase (onClick, onMouseEnter, onKeyDown). Inline style attributes are converted from strings to JavaScript objects with camelCase property names: style="color: red; font-size: 16px" becomes style={{ color: 'red', fontSize: '16px' }}. Void elements (br, hr, img, input, link, meta) are self-closed since JSX requires it. A common use case is taking HTML from a landing page builder, static site template, or Figma's "Copy as HTML" and converting it for a React or Next.js project. Another is copying HTML examples from documentation or Stack Overflow that need to work in JSX. The converter handles nested elements and multi-level attribute combinations correctly, and produces output that can be pasted directly into a component's return statement.