TSX Output
TSX output will appear here
Paste HTML on the left to generate React-ready TSX. Or load sample data to see a demo.
Try HTML to TSX with sample input
HTML to TSX
Convert HTML snippets to React JSX/TSX instantly
How to convert HTML to TSX
Paste HTML on the left and get React-ready TSX output on the right.
1
Paste your HTML
Paste any HTML snippet into the editor. Click "Sample" to load a demo with forms, inputs, and inline styles.
All attributes supported - class, for, tabindex, readonly, maxlength, and 30+ more.
Inline styles - CSS strings are converted to React style objects automatically.
HTML Input Example
<div class="card">
<label for="email">Email</label>
<input
type="email"
id="email"
class="input-field"
autocomplete="email"
>
<button
class="btn"
onclick="handleSubmit()"
style="background-color: #4f46e5; font-size: 14px"
>
Submit
</button>
</div>2
Review the TSX output
The right panel shows React-ready TSX. Attributes are renamed, styles are converted, and void elements are self-closed.
React props - class → className, for → htmlFor, onclick → onClick, etc.
Self-closing tags - <img>, <input>, <br>, <hr> are properly self-closed.
TSX Output Example
<div className="card">
<label htmlFor="email">Email</label>
<input
type="email"
id="email"
className="input-field"
autoComplete="email"
/>
<button
className="btn"
onClick={handleSubmit}
style={{ backgroundColor: '#4f46e5', fontSize: '14px' }}
>
Submit
</button>
</div>3
Copy and paste into your component
Click "Copy" to copy the TSX to your clipboard, then paste it directly into your React component.
One-click copy - Copy TSX output to clipboard instantly.
Download .tsx - Save the output as a .tsx file for your project.
Copy or download TSX
2 Actions
Download
Download TSX as html-to-tsx.tsx
Copy
Copy TSX output to clipboard
Tip: Replace event handler string values with function references after pasting.
HTML to TSX FAQs
Common questions about converting HTML to React TSX
The HTML to TSX converter applies all transformations required to make plain HTML valid inside a React component. It renames reserved attributes (class → className, for → htmlFor, tabindex → tabIndex, readonly → readOnly, maxlength → maxLength, etc.), converts inline event handlers to camelCase React props (onclick → onClick, onsubmit → onSubmit, onchange → onChange, and 30+ more), converts inline style strings to React style objects ("color:red;font-size:14px" → {{ color: 'red', fontSize: '14px' }}), self-closes void elements (<img>, <input>, <br>, <hr>, etc.), and converts HTML comments (<!-- text -->) to JSX expression comments ({/* text */}). The result pastes directly into a .tsx file without manual edits.
React JSX is compiled to JavaScript, where class is a reserved keyword used to define ES6 classes. To avoid the ambiguity, React chose className as the prop name for the HTML class attribute. Similarly, for is a reserved keyword in JavaScript (used in for...of loops), so React uses htmlFor for label elements. The HTML to TSX converter handles both of these automatically, along with dozens of other attribute renames required by the React DOM.
HTML inline styles are CSS property strings like style="background-color: #007bff; font-size: 16px; border-radius: 4px". React requires a JavaScript object instead: style={{ backgroundColor: '#007bff', fontSize: '16px', borderRadius: '4px' }}. The HTML to TSX converter splits the CSS string on semicolons, converts each property name from kebab-case to camelCase (background-color → backgroundColor, font-size → fontSize), and wraps the values in quotes. Pure integer values (like 16 for font-size) are kept as numbers per React convention.
HTML void elements cannot have children and do not require a closing tag in HTML, but JSX requires all elements to be explicitly closed. The HTML to TSX converter self-closes: <area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <param>, <source>, <track>, and <wbr>. For example, <img src="photo.jpg" alt=""> becomes <img src="photo.jpg" alt="" />. Elements that already have a self-closing slash in the source are preserved as-is.
HTML event handler attributes are lowercase (onclick, onsubmit, onchange), but React uses camelCase synthetic event props (onClick, onSubmit, onChange). The HTML to TSX converter renames all standard DOM event attributes. The string value is preserved as-is, for example onclick="handleClick()" becomes onClick="handleClick()". Since JSX event handlers should be function references rather than strings (onClick={handleClick}), you will want to replace the quoted value with a proper handler reference after pasting into your component.
Yes — all HTML to TSX conversion runs entirely in your browser using client-side TypeScript. Your HTML markup is never sent to any server. This makes the tool safe for proprietary templates, internal design system snippets, or any HTML that contains sensitive class names or structure. No account is needed, there are no usage limits, and the tool is completely free.
JSON EDITOR
Edit, format, and beautify JSON
JSON VALIDATOR
Validate, fix, and inspect JSON
JSON ANALYZER
Compare, measure, and map JSON
EXPORT & SHARE
Convert JSON to other formats
IMPORT TO JSON
Convert other formats to JSON
CODE & FORMATTERS
Generate code and format other languages