Skip to content
TextArray1.41.0
100% local

HTML to JSX converter

Turn HTML markup into JSX you can paste straight into a React component.

Input
Output
Related tools
HTML formatterDeveloper tools
CSS to JS object converterDeveloper tools
HTML to BBCode converterDeveloper tools
Strip MarkdownText cleaning
i18n key diffDeveloper tools
TOML to JSON converterDeveloper tools
HTML to JSX converter
Paste HTML markup and get JSX you can drop straight into a React component. The converter renames every attribute React expects a different name for — class becomes className, for becomes htmlFor, tabindex becomes tabIndex, colspan becomes colSpan, and dozens more — so the console stops warning about unknown DOM properties the moment you paste a snippet copied from a design tool, a CMS export, an email template or an old static page.
Inline styles are the next thing React refuses as a plain string. Turn on "Convert style to object" and style="color:red;font-size:16px" becomes style={{ color: 'red', fontSize: '16px' }}, with every property camelCased and every value quoted, ready for the style prop. Void elements are the third catch: HTML lets you leave <br>, <img>, <input>, <hr> and <meta> unclosed, but JSX will not parse them, so "Self-close void elements" rewrites them as <br />, <img /> and so on for you.
HTML comments turn into the only comment form JSX accepts inside markup, so <!-- like this --> becomes {/* like this */}. Text content, whitespace and line breaks stay exactly as you wrote them, so your indentation and copy survive the conversion untouched, and data-* and aria-* attributes are deliberately left hyphenated because JSX keeps those as they are. Both options are on by default and can be switched off when you only want the attribute renames.
The whole conversion happens in your browser as plain string processing — no DOM, no server, no upload. Paste proprietary markup from an internal admin panel or a client site and nothing leaves your device. Copy the JSX, download it as a file, or send it on to another TextArray tool for the next step.
FAQ
Which attributes does it rename?
class → className, for → htmlFor, and the camelCase forms React expects: tabIndex, readOnly, maxLength, colSpan, rowSpan, cellPadding, crossOrigin, autoFocus, contentEditable, srcSet and many more. data-* and aria-* attributes are left exactly as they are, because JSX keeps those hyphenated.
Does it convert inline styles?
Yes, when "Convert style to object" is on. Each declaration becomes a camelCased key with a quoted string value inside a double-brace style object. Turn the option off to leave your style strings untouched.
Is this a full HTML parser?
No — it is a fast string transform, not a browser DOM. It covers the conversions React actually needs: attribute renames, inline styles, void elements and comments. It does not reindent or validate your HTML, so malformed tags come through as written.
Is my HTML uploaded anywhere?
No. The conversion runs entirely in your browser with local string processing. Your markup never reaches a server, so pasting internal or client code is safe.