HTML to TSX Converter

How to convert HTML to TSX

1. Paste your HTML markup into the input field — a component template, a design export, or a snippet from an existing page.
2. Click "Convert" — the TSX output appears instantly: attributes renamed, styles converted, and the JSX wrapped in a typed React.FC component scaffold.
3. Switch to "TSX → HTML" using the toggle above if you need the reverse direction.
4. Click "Copy" to copy the TSX and paste it directly into your TypeScript React project.
5. Rename Component and fill in the Props interface to match your actual prop types.

How the HTML to TSX converter works

The converter applies the same attribute transformations as HTML → JSX — class → className, for → htmlFor, tabindex → tabIndex, camelCase events, inline style string → object — and then wraps the resulting JSX in a complete TypeScript React component scaffold: an import statement, an empty Props interface, a React.FC<Props> arrow function, and an export default. The entire conversion runs in your browser — no data is sent to any server.

TSX is JSX written in a TypeScript file. The structural transformation rules are identical to JSX, but the output is typed from the start: you get a React.FC<Props> component declaration with an interface Props {} placeholder ready for your prop definitions. This saves the first few minutes of every "paste from Figma" workflow.

// Input HTML:
<div class="card">
  <label for="name">Name</label>
  <input type="text" id="name" readonly tabindex="1"
         style="color: blue; font-size: 14px">
  <button onclick="handleSubmit()">Submit</button>
</div>

// Output TSX:
import React from 'react'

interface Props {}

const Component: React.FC<Props> = () => {
  return (
    <div className="card">
      <label htmlFor="name">Name</label>
      <input type="text" id="name" readOnly tabIndex={1}
             style={{ color: 'blue', fontSize: '14px' }} />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  )
}

export default Component

HTML attributes that change in TSX (same as JSX)

TSX uses the same attribute names as JSX — the TypeScript layer adds types but does not change attribute naming. Every HTML attribute that differs in JSX also differs in TSX. The full mapping is identical to the HTML → JSX conversion.

The TypeScript component scaffold explained

The converter wraps every output in a minimal but complete TypeScript React component. Each part of the scaffold has a purpose.

import React from 'react'   // Required for JSX transform in older setups;
                               // React 17+ with new JSX transform: can be removed

interface Props {}             // Replace with your actual prop definitions:
                               // interface Props { title: string; count?: number }

const Component: React.FC<Props> = () => {  // Rename Component to match your file name;
                                             // add destructured props: ({ title, count })
  return (
    // Your converted JSX here
  )
}

export default Component       // Rename to match the component name above

After conversion, the typical next steps are: rename Component to match your file name, add prop definitions to the Props interface, destructure the props in the function signature, and replace any static values that should come from props with the corresponding prop references.

TSX vs JSX — what actually differs

JSX and TSX are identical at the markup level. The differences are in what TypeScript adds on top:

• Type-checked props — TypeScript validates that every prop passed to a component matches its declared type at compile time. JSX has no equivalent check.
• React.FC<Props> declaration — the function type annotation gives TypeScript enough information to check prop usage inside the component and at every call site.
• Generic components — TSX supports typed generics: function List<T extends { id: string }>({ items }: { items: T[] }). JSX has no syntax for this.
• Event handler types — TSX event handlers are typed: (e: React.ChangeEvent<HTMLInputElement>) => void. JSX accepts any function without type checking.
• Build output — both JSX and TSX compile to identical JavaScript. TypeScript types are erased at build time and have zero runtime cost.

Inline styles: the same conversion, type-checked

Inline style conversion works identically to HTML → JSX. The CSS string is split by semicolons, each property name is camelCased, and the result is written as a JavaScript object literal. In TSX, the resulting object is type-checked against React.CSSProperties — TypeScript will catch misspelled property names at compile time.

// Input HTML style string:
style="background-color: #fff; font-size: 16px; margin-top: 8px; z-index: 10"

// Output TSX style object (type: React.CSSProperties):
style={{ backgroundColor: '#fff', fontSize: '16px', marginTop: '8px', zIndex: 10 }}

// TypeScript catches misspellings at compile time:
// style={{ backroundColor: '#fff' }}  → Error: unknown property