HTML to JSX
Convert HTML to React JSX: class becomes className, style strings become objects, and tags are closed. Private, in your browser.
HTML
Stays in your browserJSX
The result appears here after you press Convert.
Shortcuts: Ctrl+Enter run · Ctrl+Shift+C copy result · / search (use ⌘ on Mac)
Next steps
Done here? Use the Send to… menu on the result to carry it on to JavaScript Beautifier.
Free Online HTML to JSX
Paste HTML from a design, a template or a website and get JSX you can use in a React component. The small changes that make HTML invalid in JSX are done for you. It gives developers a quick browser-based way to solve a focused html to jsx task before moving the result into a project.
How to use HTML to JSX
Paste your code in the box on the left, or open a file, then press Convert. Choose "Component" to get a whole React component, or "Just the JSX" for the markup alone.
Common mistakes
- Pasting a whole page with <html> and <body>: only the body content is converted.
- Leaving inline scripts in the markup: React does not run <script> tags it renders.
Frequently asked questions
What is changed from HTML to JSX?
class becomes className, for becomes htmlFor, attributes such as tabindex and maxlength are camelCased, style="a: b" becomes style={{ a: "b" }}, void tags such as <img> and <br> are self-closed, comments become {/* */} and curly braces in text are escaped.
Why did my onclick turn into a comment?
React needs a function, not text. The original code is kept in a comment inside an empty function so you can move it into a real handler.
Why is value written as defaultValue?
A fixed value would make the field impossible to edit in React. defaultValue sets the starting value and lets people type. Use value with onChange if you want a controlled field.
Is my code uploaded anywhere?
No. The conversion runs in your browser and nothing you paste is sent to a server.
How do I use this html to jsx tool?
Use the interactive controls above; processing stays in your browser and the result is intended as a practical starting point for development work.
More Formatters & Parsers
JSON ParserCheck if JSON is valid and see it neatlyJSON Schema ValidatorCheck data follows the rules you setJSONPath TesterPick values out of JSON with a pathXML/XSD ValidatorCheck XML is valid and follows a schemaJSON ↔ TOML ConverterSwitch config files between JSON and TOMLURL ParserBreak a web link into its partsQuery String ParserRead the ?a=1&b=2 part of a linkREST API TesterSend API requests and see the response