ZeroTool Workbench
HTML to JSX Converter
Convert HTML to React JSX instantly in your browser. Handles className, htmlFor, inline style objects, camelCase events, self-closing tags, and more. Free, no signup.
How to Use
- Paste your HTML into the left textarea.
- The JSX output appears instantly in the right textarea as you type.
- Click Copy to copy the JSX output to your clipboard.
Conversion Rules
| HTML | JSX |
|---|---|
class="..." | className="..." |
for="..." | htmlFor="..." |
style="color:red" | style={{ color: 'red' }} |
onclick="..." | onClick="..." |
onchange="..." | onChange="..." |
tabindex | tabIndex |
readonly | readOnly |
maxlength | maxLength |
colspan | colSpan |
rowspan | rowSpan |
crossorigin | crossOrigin |
contenteditable | contentEditable |
<br> | <br /> |
<img src="..."> | <img src="..." /> |
<input ...> | <input ... /> |
<!-- comment --> | {/* comment */} |
Common Use Cases
- Migrating static HTML templates into React components
- Copying HTML snippets from design tools (Figma, Webflow) into JSX files
- Learning the differences between HTML and JSX attribute naming
- Converting email HTML templates for use in React email libraries
- Quickly adapting third-party HTML widgets for React projects
FAQ
What does an HTML to JSX converter do?
It transforms standard HTML markup into valid React JSX syntax. Key changes include renaming class to className, for to htmlFor, converting inline styles to JavaScript objects, camelCasing event handlers, and adding explicit self-closing slashes to void elements.
Why is className used instead of class in JSX?
JSX is compiled to JavaScript, and class is a reserved keyword in JavaScript. React uses className to avoid the collision. The converter handles this rename automatically.
How are inline styles converted?
HTML inline styles use a string: style="color: red; font-size: 14px". JSX requires an object: style={{ color: 'red', fontSize: '14px' }}. The converter parses the string and produces camelCased property names.
What do HTML comments become in JSX?
HTML comments (<!-- text -->) are converted to JSX expression comments ({/* text */}), the only form React's JSX parser accepts.
Is anything sent to a server?
No. The conversion runs entirely in your browser using JavaScript. No data is transmitted.