JSX to TSX Converter

Add TypeScript types to React JSX components with AI — free, instant, no login required.

JSX to TSX conversion adds TypeScript interfaces, typed props, and event handler types to your React components. JS2TS automates this process — paste any JSX component and get production-ready TSX with full type safety in seconds.

Paste your code, then click Convert

TSX

How to use this tool?

This AI-powered converter adds TypeScript types to your JSX code, converting it to fully typed TSX. Follow these steps:

Paste your JSX code (React components, hooks, event handlers) into the input box on the left.
Click the "Convert" button. The AI adds TypeScript interfaces, typed props, and event handler types.
Copy the TypeScript TSX output from the right panel and save it as a .tsx file in your project.

Example: Simple Function

JSX

// JSX Component
function UserCard({ name, age, onDelete }) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>Age: {age}</p>
      <button onClick={onDelete}>Delete</button>
    </div>
  );
}

TSX

// TSX Component
interface UserCardProps {
  name: string;
  age: number;
  onDelete: (e: React.MouseEvent<HTMLButtonElement>) => void;
}
function UserCard({ name, age, onDelete }: UserCardProps): React.ReactElement {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>Age: {age}</p>
      <button onClick={onDelete}>Delete</button>
    </div>
  );
}

How to Convert JSX to TSX

Converting JSX to TSX manually means writing a TypeScript interface for every component's props, typing every useState and useRef hook, and adding React.ChangeEvent or React.MouseEvent types to every event handler. For a component with 10 props and 5 event handlers, that's 30+ manual type annotations.

The JSX to TSX converter automates every annotation. Paste any JSX component — functional components, hooks, context providers — and get fully typed TSX output with interfaces, hook generics, and event types in seconds.

Why Convert JSX to TSX?

→Catch prop type errors at compile time instead of runtime — TypeScript alerts you when the wrong prop type is passed
→Get full IDE autocomplete on component props, eliminating the need to read component source to understand its API
→Safer refactoring — rename a prop and TypeScript shows every usage that needs updating
→Required for large React codebases and teams where type safety prevents integration bugs

What the JSX to TSX Converter Handles

Component prop interfaces

useState<T> generics

useRef<HTMLElement> types

React.ChangeEvent handler types

React.MouseEvent handler types

React.KeyboardEvent types

React.FormEvent types

Children typed as React.ReactNode

FC<Props> or explicit returns

PropTypes → TypeScript conversion

Custom hook return types

Context provider/consumer types

Frequently Asked Questions

What is the difference between JSX and TSX?

.jsx files contain JavaScript with JSX syntax. .tsx files contain TypeScript with JSX syntax. TSX adds TypeScript type annotations — prop interfaces, hook generics, and event handler types — while keeping identical JSX markup and logic.

How do I convert a JSX file to TSX?

Paste your JSX component into the converter and click Convert. The AI adds TypeScript interfaces for props, types all hooks, and adds event handler types. Copy the output and save it as a .tsx file.

Do I need to rename .jsx files to .tsx?

Yes. Files containing JSX syntax must use the .tsx extension (not .ts) for TypeScript to process them correctly. Files without JSX use .ts. The converter outputs TSX-ready code — just save with the .tsx extension.

How do I type React component props in TypeScript?

Define an interface for the props: interface ButtonProps { label: string; onClick: () => void; disabled?: boolean; }. Pass it to the component: function Button({ label, onClick, disabled }: ButtonProps). The converter generates these interfaces automatically.

How do I type a React event handler in TSX?

Use React's built-in event types: React.ChangeEvent<HTMLInputElement> for onChange, React.MouseEvent<HTMLButtonElement> for onClick, React.KeyboardEvent<HTMLInputElement> for onKeyDown, React.FormEvent<HTMLFormElement> for onSubmit.

Can I convert a whole React app from JSX to TSX?

Yes, but do it file by file. Convert each component individually, fix any type errors, then move to the next. Start with leaf components (no children) and work up. The converter handles one file at a time — paste each component separately.

What happens to PropTypes when converting to TSX?

PropTypes are replaced by TypeScript interfaces — they serve the same purpose but TypeScript interfaces are checked at compile time (not runtime). The converter removes the PropTypes import and converts each PropTypes definition to a TypeScript interface.

Is the JSX to TSX converter free?

Yes. Completely free, no account or login required. Unlimited conversions.

What React versions does the converter support?

The converter supports React 16+ syntax including hooks (useState, useEffect, useRef, useCallback, useMemo, useContext), functional components, and all modern JSX patterns. Class components are also supported.

How do I type children in a React TSX component?

Use React.ReactNode for any renderable content: interface Props { children: React.ReactNode }. For single React elements, use React.ReactElement. Avoid using JSX.Element — React.ReactNode is broader and handles text, arrays, and null.