HTML to JSX Converter
Turn an HTML fragment into React-friendly JSX markup.
Translate HTML structure into JSX syntax
JSX resembles HTML but applies JavaScript property names and expression syntax. This converter parses the fragment into nodes before rewriting class as className, for as htmlFor, common camel-case attributes, boolean attributes, comments, and HTML void elements. Inline style declarations become a JSX style object with camel-case property names instead of remaining a CSS string.
The default label becomes JSX with htmlFor set to email, className set to field, and a style object containing color red and fontSize 14px. Its text remains Email. Braces in ordinary text are encoded so they do not become accidental JSX expressions, and malformed tag nesting or invalid style declarations produces an explicit error.
Attribute conversion and review points
Automatic conversion cannot decide whether event-handler strings should become functions or whether a custom element should map to a React component. SVG attributes, data attributes, and framework-specific conventions may also require adjustment. Parsing and serialization stay in your browser. Review event handlers, dangerous HTML, component capitalization, accessibility, and any styles that use semicolons inside functions before pasting into a project.
Frequently Asked Questions
Does class become className?
Yes. The converter also maps for to htmlFor and camel-cases several common DOM property names.
How are inline styles converted?
Each declaration becomes a property in a JSX style object, with hyphenated CSS names converted to camel case.
Are event handler strings turned into functions?
No. Behavior cannot be inferred safely from markup, so event handlers require manual React code review.
Browse the full set of free, private, in-browser tools.