HTML to JSX

HTML to JSX Converter

Paste HTML and get JSX you can drop into a React component. Attributes are renamed (class to className, for to htmlFor, tabindex to tabIndex), style strings become objects, empty tags close themselves, comments become JSX comments and inputs keep their values as defaultValue.

How do I use the HTML to JSX?

1. Paste HTML: a snippet or a whole page.
2. Pick JSX, or a React component with a name.
3. Copy the result, formatted by Prettier.

What does the HTML to JSX do?

• className, htmlFor and every renamed attribute
• Style strings as style objects
• onclick as an onClick function
• defaultValue and defaultChecked for form fields
• Several top-level tags wrapped in a fragment
• A full page gives its <body>

Frequently asked questions

What doesn't carry over?

Attributes JSX can't hold, such as Alpine's @click, are left out and listed. A <script> doesn't run when React renders it, so move its code into the component.

Is my code uploaded?

No. The conversion runs in your browser; your code stays on your device.

More JSON tools

Bracely has 98 JSON tools in one page. Related ones:

• SVG to JSX
• CSS to Tailwind
• SQL formatter
• HTML formatter
• CSS formatter
• JavaScript formatter
• TypeScript formatter
• Code screenshot
• JSON Formatter
• JSON Validator
• JSON Viewer
• JSON Repair
• JSON Diff
• JSON to YAML
• JSON to CSV
• jq Playground

Runs entirely in your browser. Nothing you paste is uploaded. Made by Saurabh Pagrut · About · Privacy policy
Last updated 22 October 2026 · Version 5.5 · Changelog
Saurabh Pagrut on GitHub · LinkedIn · X · YouTube · Instagram