HTML ⇄ JSX Converter
Convert HTML to React JSX or reverse JSX back to plain HTML – bidirectional and instant.
HTML Input
JSX Output
Two‑Way HTML ⇄ JSX Converter
Whether you are migrating a static website to React or need to extract plain HTML from a JSX component, this tool handles both directions.
HTML → JSX: converts class to className, for to htmlFor, camelCase events, self‑closing void tags, and transforms inline styles into objects.
JSX → HTML: reverts those changes, turns style objects back into strings, and removes React fragment wrappers.
HTML → JSX Features
class→className,for→htmlFor- Event handlers:
onclick→onClick, etc. - Void tags (
<img>,<br>) become self‑closing - Inline
style="..."→style={{ ... }} - Optional component wrapper with export
JSX → HTML Features
className→class,htmlFor→for- Convert camelCase events back to lowercase
- Transform
style={{ marginTop: '10px' }}→style="margin-top: 10px;" - Remove React fragment
<> </>and component wrapper - Convert self‑closing tags to standard HTML void elements