UTILS.
100% in-browser

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.

— 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