HTML to JSX Converter
Convert raw HTML into valid JSX: renames class and for, camelCases attributes and event handlers, converts inline styles to objects, self closes void elements and escapes stray braces.
Last reviewed by the Radiatus Cloud team
Need this built for your product?
We design, build & host secure software & APIs.
JSX is not HTML, and the differences bite
Pasting HTML into a React component produces a wall of warnings at best and a build error at worst. The attribute named class collides with the JavaScript reserved word, so JSX uses className. The label attribute for becomes htmlFor. Every hyphenated DOM property such as tabindex or colspan becomes camelCase. Void elements like img and br must be explicitly self closed. Inline style is an object of camelCased properties rather than a string. And a stray curly brace anywhere in the text is read as the start of an expression.
Where the subtle failures are
Some of these mistakes are loud and some are silent. A style attribute left as a string throws immediately. A misspelled className renders nothing and is easy to miss. An unclosed img tag breaks the parse. But an HTML comment left in place is emitted as literal text rather than being stripped, and a data attribute wrongly camelCased simply stops appearing in the DOM, which is the kind of bug that survives review.
Converting the whole tree
This converter parses the markup with the browser DOM parser rather than with regular expressions, so nesting, quoting and entity handling are correct by construction. Attributes are mapped through the React property table, styles become objects, comments become JSX comment expressions, and boolean attributes are emitted in the shorthand form. The output is indented so it can be pasted straight into a return statement.
Related tools
- JSON Formatter — Format and beautify JSON in your browser. Pinpoints syntax errors by line and column, flags unsafe integers, and never uploads your data to a server.
- JSON Validator — Validate JSON syntax with precise line and column errors, and check documents against a JSON Schema. Runs locally in your browser, nothing uploaded.
- Regex Tester — Test regular expressions against sample text with live match highlighting, capture groups and flag control. Runs entirely in your browser.
- HTML Minifier — Minify HTML by removing comments and redundant whitespace, without breaking inline elements or pre blocks. Runs entirely in your browser.
Frequently Asked Questions
Why does class become className?
Because class is a reserved word in JavaScript and JSX attributes compile to object properties. React chose className to match the DOM property name, which is also why for becomes htmlFor.
Are inline styles really converted?
Yes. A style string such as "font-size: 14px; color: red" becomes an object with camelCased keys, which is the only form React accepts. Numeric values keep their units as strings, since React only adds px for unitless numbers.
What happens to HTML comments?
They become JSX comment expressions wrapped in braces, which is the only way a comment can appear inside JSX. Left as raw HTML comments they would render as visible text.
Does it handle SVG?
Yes. SVG attributes are camelCased where React expects it, such as strokeWidth and viewBox, while genuinely hyphenated presentation attributes that React passes through are left alone.
Can I convert a whole page?
You can, but the output will be one enormous expression. JSX also requires a single root element, so the converter wraps multiple top level nodes in a fragment automatically.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
Paste HTML and press Convert to get JSX you can drop into a React component.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
JSON Formatter
DeveloperFormat and beautify JSON in your browser. Pinpoints syntax errors by line and column, flags unsafe integers, and never uploads your data to a server.
JSON Validator
DeveloperValidate JSON syntax with precise line and column errors, and check documents against a JSON Schema. Runs locally in your browser, nothing uploaded.
Regex Tester
DeveloperTest regular expressions against sample text with live match highlighting, capture groups and flag control. Runs entirely in your browser.