JSONToTable

How to Convert JSX to TSX - Step by Step Guide

Step 1

Input Your JSX Code

Let's get your JSX into the converter! Whether you're migrating a single component or planning a full TypeScript migration, you have several convenient options:

•
Paste directly: Copy your React JavaScript component and paste it into the left editor
•
Upload a file: Click "Upload" to select a .jsx or .js file from your computer
•
Try the sample: Click "Sample" to load an example and see how the converter works

Example: JSX Component Input

Here's a typical JSX component without type annotations:

function Button({ label, onClick }) {
  return (
    <button onClick={onClick}>
      {label}
    </button>
  );
}
Step 2

Automatic Type Generation

The conversion happens instantly! As soon as you input JSX, the converter automatically:

•
Generates prop interfaces: Writes a Props interface for each component that destructures its props, right above the component
•
Infers types: Guesses each prop type from its default value, or from its name when there is no default
•
Types event handlers: Adds React event types to inline onClick, onChange and onSubmit handlers on HTML elements

Example: TSX Component with Types

The same component, now with TypeScript types:

interface ButtonProps {
  label: string;
  onClick: (...args: any[]) => void;
}

function Button({ label, onClick }: ButtonProps) {
  return (
    <button onClick={onClick}>
      {label}
    </button>
  );
}
Step 3

Review Generated Types

Check the converted TypeScript code in the right editor. The converter provides intelligent features:

•
Type inference: Automatically detects types from prop names (age → number, onClick → function)
•
Hook typing: Adds a type to useState from its initial value, e.g. useState<boolean>(false). Other hooks are left as they are
•
Event types: Picks the element type from the tag, so a select gets React.ChangeEvent<HTMLSelectElement> and a div click gets React.MouseEvent<HTMLDivElement>
Step 4

Export Your TSX Component

When the types look right, take the file with you:

•
Copy to clipboard: One-click copying to paste directly into your TypeScript project
•
Download as .tsx: Saves the result as converted.tsx; rename it to match your component

Frequently Asked Questions

Why convert JSX to TSX?

TypeScript catches mistakes like a missing prop or a wrong argument while you edit, instead of in the browser. It also makes autocomplete and renaming much more reliable. Adding types to a component you already have is the usual first step of moving a React project to TypeScript, and this page gives you a typed first draft of one file to start from.

Is the conversion 100% accurate?

No, and it doesn't try to be. Prop types are guesses from names and default values, so treat them as a first draft: a prop called title becomes string even if you pass it a number. Your code itself is never rewritten. The converter only adds annotations and interfaces, so the logic, strings and numbers stay exactly as you wrote them. Run the result through tsc or your editor and tighten the guesses from there.

What does the converter actually change?

Four things. Components written as function declarations or arrow functions that destructure their props get a Props interface, placed just above the component. useState and React.useState calls get a type from their initial value (useState(false) becomes useState<boolean>(false)). Inline onClick, onChange and onSubmit handlers on HTML elements get the matching React event type, for example React.ChangeEvent<HTMLSelectElement> on a select. Everything else, including class components, helper functions and other hooks, is left as it was.

Can I convert a whole project with it?

It works on one file at a time, which suits a gradual migration: paste or upload a component, check the result, save it as .tsx and move on to the next. For a large codebase it is usually easier to enable allowJs in tsconfig.json and convert files as you touch them, using this page for the components you want typed quickly.

How are prop types guessed?

A prop with a default value takes its type from that value, so size = "md" gives size?: string and the prop is marked optional. Without a default, the name decides: names starting with on become functions, is/has/show/can names and words like disabled or checked become boolean, names ending in count, age, index, total, width, height or price become number, names ending in Id become string | number, names ending in list, items or rows become any[], children becomes React.ReactNode and style becomes React.CSSProperties. Anything else falls back to string.

Is my code secure when using this tool?

Yes. The conversion runs in your browser with JavaScript, and the code you paste or upload is not sent to our server or saved anywhere.

Related Tools

JSX Formatter

Format and beautify JSX/React code with proper indentation

JSX Fixer

Fix broken JSX automatically, repair React component syntax errors, unclosed tags, and invalid expressions

HTML to JSX Converter

Convert HTML to JSX/React format instantly

Markdown to JSX Converter

Convert Markdown to React JSX components for blogs and documentation

JSX Validator

Validate JSX syntax and React component structure

JSX Minifier

Minify JSX/React code for production builds

JSX to HTML Converter

Convert React JSX to standard HTML

JSX to JavaScript

Convert JSX to React.createElement calls