How to Open and Work with .tsx Files

Direct answer: A .tsx file is TypeScript source code that contains JSX. Open it in a source-code editor such as Visual Studio Code. To type-check, build, or run it, open the repository that contains the file and follow that project’s configuration and documented commands. Opening the file by itself only shows source code; it does not launch the application.

TypeScript’s JSX guide explains that JSX files use the .tsx extension and require a JSX compiler setting. React’s documentation likewise says that every file containing JSX must use .tsx. The exact dependencies, scripts, and runtime belong to the project you found the file in.

1. What a .tsx file is

TSX combines:

TypeScript: JavaScript with static types, interfaces, generics, and type checking.
JSX: XML-like syntax embedded in code to describe a component or element tree.

type GreetingProps = {
  name: string;
};

export function Greeting({ name }: GreetingProps) {
  return <h1>Hello, {name}</h1>;
}

The angle-bracket markup is JSX. The type declaration and typed property are TypeScript. The file must be named Greeting.tsx, not Greeting.ts, so tools know it contains JSX.

JSX is source syntax. A compiler transforms it according to the project’s jsx option, and a framework or bundler may perform additional processing. The extension alone does not identify whether the project uses React, another JSX-compatible library, server rendering, or a custom build pipeline.

2. How to open a .tsx file

Open the source in an editor

Install a source editor that supports TypeScript, such as Visual Studio Code.
Choose File → Open Folder and select the project directory, rather than opening only the individual file.
In the Explorer, select the .tsx file.
Read the diagnostics panel and inline squiggles for syntax, JSX, and type errors.

VS Code provides TypeScript language features and JSX support for *.tsx. Other editors can open the file as plain text, but project-aware type checking and import resolution depend on the editor’s TypeScript integration.

Open it from a terminal

# macOS or Linux
code path/to/Component.tsx

# Windows PowerShell
code .\path\to\Component.tsx

If the code command is unavailable, open VS Code normally and use its folder or file picker. You do not need a special TSX viewer: it is a text source file.

3. Inspect the project before editing

A TSX file rarely works as a standalone script. Before changing it, inspect the files that define the project workflow:

File or folder	What it tells you
`package.json`	Dependencies, package manager scripts, and entry commands.
`tsconfig.json`	Compiler options, including `jsx`, module settings, paths, and included files.
`tsconfig.*.json`	Overrides for development, tests, or production builds.
`vite.config.`, `webpack.config.`, framework config	Bundler and framework processing.
`README.md` or contributor docs	Project-specific install, development, test, and build steps.
`src/`, `app/`, `pages/`	How source files are organized and imported.

# Inspect common project files
ls
cat package.json
cat tsconfig.json

Use the package manager and scripts already selected by the repository. Do not replace its setup with a generic command before checking its documentation.

4. Install dependencies and type-check the file

Install dependencies with the package manager indicated by the lockfile:

# npm
npm install

# pnpm
pnpm install

# Yarn
yarn install

Then inspect the scripts object in package.json. Typical repositories expose a script such as typecheck, build, dev, or test; the names are project-defined.

# Run the script names that exist in this project
npm run typecheck
npm run build
npm run dev

If the project has no script for type checking, a repository may use a direct TypeScript command, but confirm its dependencies and configuration first:

npx tsc --noEmit

--noEmit checks types without writing compiled files. The project may use a different config file, so a documented command such as tsc -p tsconfig.app.json --noEmit takes precedence.

5. Understand the `jsx` compiler option

The TypeScript Handbook and TSConfig reference list these JSX modes:

Mode	Result	Typical implication
`preserve`	Leaves JSX in the emitted output and commonly produces `.jsx` files.	A later tool, such as a bundler, transforms JSX.
`react`	Transforms JSX into classic `React.createElement` calls and emits JavaScript.	The classic React runtime is expected.
`react-jsx`	Uses the automatic JSX runtime and emits JavaScript.	Explicit React imports may not be required for JSX.
`react-jsxdev`	Uses the automatic development JSX runtime.	Development diagnostics are included.
`react-native`	Preserves JSX with React Native-oriented output behavior.	The native toolchain performs later transformation.

{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

Do not change this value just to silence an error. The correct mode is chosen by the framework and build pipeline. A mode mismatch can cause errors such as missing JSX runtime modules, unexpected output, or a bundler receiving syntax it does not process.

6. Edit TSX safely

Use typed props

type ButtonProps = {
  label: string;
  onClick?: () => void;
};

export function Button({ label, onClick }: ButtonProps) {
  return (
    <button type="button" onClick={onClick}>
      {label}
    </button>
  );
}

Remember JSX syntax rules

Return one parent element, or use a fragment such as <>...</>.
Close every element, including elements that look self-closing in HTML.
Use className rather than HTML’s class when the framework expects React-style JSX.
Put JavaScript expressions inside braces, for example {name}.
Use a stable key when rendering a list.

type Item = { id: string; title: string };

export function ItemList({ items }: { items: Item[] }) {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}

Keep imports consistent with the runtime

Classic and automatic JSX runtimes differ. A project using react-jsx may not require import React from 'react', while a classic setup may. Follow the existing files and the project’s compiler setting instead of adding imports mechanically.

7. Run the application

Running a TSX file directly with Node usually fails because Node does not automatically understand TypeScript types, JSX syntax, or the project’s module transformation. Start the repository’s development command instead:

npm run dev

The command normally starts a development server and reports a local URL. Open that URL in a browser. If the project is a library, the correct action may be a build or test command rather than a web server.

For production, use the documented build and start sequence:

npm run build
npm run start

Those names are examples only. The repository’s package.json and documentation are authoritative.

8. Capture a rendered TSX application

Opening a TSX file shows source. To inspect the rendered result, run the project and capture the resulting URL in a browser or screenshot service. Capture only after the page has loaded its client-side components; otherwise you may see an empty shell.

Use the development server URL while iterating.
Use the deployed URL when you need production assets and routing.
Wait for a distinctive selector when content is rendered asynchronously.
Use full-page capture when routes contain content below the initial viewport.

9. Or skip the browser setup

ScreenshotNeo can capture a web page with one request after you have a URL. Its API returns PNG, JPEG, WebP, or PDF output. See the ScreenshotNeo API documentation for all options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webp

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

For a TSX app, replace https://example.com with the reachable URL of your running or deployed application. ScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before capture. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed as clean shots; response headers identify the page verdict and billing result. Its MCP server lets Claude, Cursor, and other MCP clients use take_screenshot, get_page_info, and capture_pdf. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots.

Create a free ScreenshotNeo account and start with the included monthly screenshots.

10. Common errors and fixes

Error or symptom	Likely cause	Fix
JSX syntax error in a `.ts` file	The file contains JSX but has the wrong extension.	Rename it to `.tsx` and update imports if needed.
“Cannot use JSX unless the ‘–jsx’ flag is provided”	The active TypeScript config has no valid `jsx` option.	Use the project’s intended `tsconfig`; add the framework’s documented setting only when the project is missing it.
JSX runtime module cannot be found	The selected automatic runtime or its dependency is not installed.	Install the dependency specified by the project and verify the `jsx` mode.
Cannot find module or type declarations	Dependencies are not installed, an import path is wrong, or path aliases are not loaded.	Install dependencies, check spelling and case, and run the repository’s configured type-check command.
“React must be in scope”	The project uses the classic JSX runtime.	Add the import required by that project, or use the project’s documented automatic-runtime configuration.
Page is blank after starting the app	A runtime exception, wrong route, missing environment variable, or client-only loading failure.	Check the browser console, terminal logs, route configuration, and required environment variables.
Changes do not appear	The wrong server, route, or file is being viewed, or hot reload failed.	Confirm the URL and import path, restart the dev command, and inspect the terminal for compile errors.
Build passes but the browser fails	Runtime configuration, asset paths, server rendering, or environment values differ between build and execution.	Check production logs and the framework’s deployment instructions.

11. Performance, reliability, and cost considerations

Development performance

Keep the editor opened at the project root so TypeScript resolves the intended tsconfig and dependencies.
Use the project’s incremental or watch scripts when provided.
Large generated folders should normally be excluded according to the repository’s configuration.
Fix the first type or syntax error before chasing downstream diagnostics.

Rendered-page reliability

Wait for data-driven components before taking a screenshot.
Test the exact route, viewport, timezone, and authentication state that matter.
Check both an empty-state route and a populated route; a component can type-check while its data request fails.
When a capture service reports a bot check, blank page, timeout, or failed load, investigate the page and request conditions before treating the image as valid.

Screenshot cost

For ScreenshotNeo, only clean shots are billed. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and the response includes X-Page-Verdict and X-Billed headers. Caching with a chosen TTL can reduce repeated captures. Bulk capture supports up to 100 URLs per call when documenting multiple routes.

12. A practical checklist

Open the repository folder, not only the file.
Confirm the file ends in .tsx.
Read package.json, tsconfig.json, and project instructions.
Install dependencies using the repository’s lockfile and package manager.
Confirm the configured jsx mode before changing imports.
Run the project’s type-check, test, development, or build script.
Use browser console and terminal logs for runtime failures.
Capture the rendered URL only after the relevant content is ready.

13. FAQ

Can I open a TSX file without React?

Yes. Any text editor can display it. Whether it can be compiled and run depends on the project’s JSX runtime, dependencies, and build tooling.

Can I convert TSX to plain JavaScript by renaming it?

No. Renaming changes the filename, not the TypeScript types or JSX transformation. Use the project’s compiler or build process.

Why does TypeScript emit a .jsx file?

The preserve JSX mode keeps JSX in the emitted output, so TypeScript commonly changes the extension to .jsx for the next tool in the pipeline.

Should every TSX file import React?

No. The answer depends on the configured JSX runtime. Classic mode and automatic runtime mode handle JSX differently.

Can I screenshot the TSX source itself?

Yes, by serving it through a code viewer or documentation page and capturing that URL. A screenshot service captures rendered web pages; it does not execute a local source file directly.