Free HTML to JSX Converter
Convert HTML markup to React JSX syntax. Handles className, self-closing tags, inline styles, event attributes, and more.
code HTML Input
Input: 0 chars
data_object JSX Output
Output: 0 chars
Key Features
Instant Conversion
Convert HTML to JSX in real-time. Handles className, htmlFor, self-closing tags, and all other JSX transformations automatically.
Style Objects
Converts inline style strings to JavaScript style objects with camelCase property names, ready for React components.
Event Attributes
Automatically converts HTML event attributes (onclick, onchange) to their React equivalents (onClick, onChange).
100% Client-Side
All processing runs locally in your browser. No data is uploaded to any server.
Frequently Asked Questions
Basics
What is the difference between HTML and JSX?
JSX is a syntax extension for React that looks similar to HTML but has key differences: class becomes className, for becomes htmlFor, all tags must be closed (even void elements like img and input), inline styles use JavaScript objects instead of strings, and event attributes use camelCase (onClick instead of onclick).
How do I use this converter?
- Paste your HTML markup into the left input panel.
- Click "Convert to JSX" or the tab key to trigger conversion.
- The converted JSX appears instantly in the right output panel.
- Click the copy icon or "Copy Result" to copy the JSX to your clipboard.
What transformations does this tool apply?
The tool handles: className (from class), htmlFor (from for), self-closing tags (br, hr, img, input etc.), inline style conversion from CSS strings to JavaScript objects with camelCase properties, event attribute renaming (onclick → onClick, onchange → onChange), tabindex → tabIndex, and more.
Usage Tips
Does this support all HTML attributes?
The converter handles all standard HTML attributes with their JSX equivalents. SVG attributes that use camelCase (like viewBox, strokeWidth) are also converted correctly. Custom data-* attributes are preserved as-is. If an attribute doesn't have a direct JSX equivalent, it is passed through unchanged.
Can I convert multiple HTML elements at once?
Yes. Paste any HTML fragment with multiple elements. Each root-level element is converted individually. If you have multiple root elements, wrap them in a React fragment (<>...</>) after conversion.
How are inline styles converted?
Inline style strings like style="font-size: 14px; color: red" are converted to JavaScript objects: style={{fontSize: '14px', color: 'red'}}. Property names are converted from kebab-case to camelCase, and numeric values (like 0) are kept as numbers when possible.