UTILS.
Private by default
⚛

HTML to JSX / React

Convert an HTML snippet into valid JSX for React — renaming attributes, self-closing void tags, and turning inline styles into style objects.

Your files stay on this device

Files are processed in your browser, never uploaded. The site downloads code and assets to run the tools. No accounts or trackers.

Use Download to save this tool as one HTML file for offline use.

Privacy →
— output appears here —

About this tool

The HTML to JSX / React converter parses an HTML snippet with the browser's native DOMParser and re-serializes it as valid JSX, fixing everything React needs. It runs fully client-side, so the markup you paste stays on your machine. Paste any HTML — a design export, an email template, a component sketch — and get JSX you can drop straight into a React file.

The rewrite renames reserved attributes (class becomes className, for becomes htmlFor), camelCases the rest — tabindex to tabIndex, maxlength to maxLength, stroke-width to strokeWidth — while leaving data-* and aria-* attributes untouched. Void elements such as img, br, input, and hr are made self-closing (<img />), HTML comments become {/* ... */}, literal braces in text are escaped as {'{'}, and an inline style="a:b;c:d" string is converted to a style={{ a: 'b', c: 'd' }} object with camelCased CSS keys. Boolean attributes like disabled can be emitted bare or as ={true} with a toggle.

Choose fragment output — multiple root nodes are automatically wrapped in a <>...</> fragment — or full-component output, which wraps the JSX in an export default function with your chosen name and indentation (2 spaces, 4 spaces, or tabs). The result is ready to paste; because the parse uses a real DOM, malformed nesting is normalized the same way a browser would.

Frequently asked questions

Which attributes get renamed?
class becomes className and for becomes htmlFor; other hyphenated or reserved attributes are camelCased (tabindex to tabIndex, maxlength to maxLength, stroke-width to strokeWidth). data-* and aria-* attributes are preserved exactly as written.
How are inline styles handled?
A style="color:red;font-size:14px" string becomes style={{ color: 'red', fontSize: '14px' }} — each CSS property is camelCased and every value is emitted as a string, which is always valid for React inline styles.
What happens with multiple root elements?
JSX needs a single root, so when your snippet has several top-level nodes they are wrapped in a Fragment (<>...</>). Full-component mode instead wraps them inside a returned parenthesized expression.
Does it convert comments and void tags?
Yes. HTML comments become JSX comments {/* ... */}, and void elements (img, br, input, hr, meta, link, and the rest) are rendered self-closing as <img />, which JSX requires.

More tools