🔒 Runs in your browser — nothing is uploaded✓ Free, no signup
HTML to JSX Converter
Paste HTML to get valid React JSX: class becomes className, inline styles become objects, void tags self-close and comments become JSX comments.
0 characters
JSX
When should you use the HTML to JSX?
- Moving a template or landing page into a React or Next.js app
- Converting HTML from a design tool or UI kit into components
- Fixing JSX errors after pasting raw HTML
How to use the HTML to JSX
- 1
Paste HTML
Paste a snippet or a whole page.
- 2
Choose wrapping
Wrap the result in a component and choose its name, or get plain JSX.
- 3
Review event handlers
Inline handlers like onclick become onClick placeholders — replace them with your own functions.
- 4
Copy
Copy the JSX or download it as a .jsx file.
Examples
Attributes and styles converted
HTML
<label for="email" class="label" style="font-size: 14px; margin-top: 4px">Email</label> <input id="email" readonly>
JSX
export default function Component() {
return (
<>
<label htmlFor="email" className="label" style={{ fontSize: "14px", marginTop: "4px" }}>Email</label>
<input id="email" readOnly />
</>
);
}Common errors and how to fix them
Event handlers are empty functions- Inline JavaScript strings can't run in React. The original code is kept as a comment — move it into a real function.
Input values can't be edited- value and checked are converted to defaultValue and defaultChecked so inputs stay editable. Use state if you need controlled inputs.
More from Code Formatters & Minifiers
Free tools that run in your browser — no signup, nothing uploaded.
SQL Formatter & Beautifier
Format SQL queries for MySQL, PostgreSQL, SQL Server, SQLite and more.
CSS Minifier & Compressor
Optimize CSS by removing whitespace and comments to accelerate page load time.
JS Minifier & Compressor
Compress JavaScript to improve website speed and performance.
XML Formatter & Validator
Format, validate and minify XML, with errors shown by line and column.
HTML Formatter & Beautifier
Beautify or minify HTML with clean, consistent indentation.
Markdown Editor & Preview
Write Markdown with a live preview and copy the HTML.
SVG to React Component
Turn SVG markup into a React component with camelCase attributes.
HTML to Markdown Converter
Convert HTML to clean Markdown, including tables and code blocks.
GraphQL Formatter
Format GraphQL queries, mutations and schemas with Prettier.
HTML to JSX FAQ
class becomes className, for becomes htmlFor, attributes like tabindex and readonly become camelCase, style strings become objects, and tags like <img> and <br> self-close.
style="font-size: 14px" becomes style={{ fontSize: "14px" }} — property names are camelCased and values are kept as strings.
HTML comments become JSX comments: {/* … */}.
JSX can only return one root element. When your HTML has several top-level elements they're wrapped in a fragment.
Yes, their contents are wrapped in template literals so they're valid JSX, but in React you'd usually move them to separate files or hooks.
No. Everything runs in your browser, so your HTML never leaves your device.