How to open .TSX files on Windows
To open .TSX files on Windows, right-click the .tsx file and choose Open with → Visual Studio Code (or another code editor).
Step-by-step instructions
- Right-click the .tsx file and choose Open with → Visual Studio Code (or another code editor).
- If it opens in the wrong program, change the file association to a text/code editor and reopen.
Common issues
The file opens, but JSX looks like syntax errors
If the editor or tooling treats the file as plain TypeScript (.ts) or JavaScript, the embedded JSX may be flagged as invalid syntax.
- Confirm the file extension is .tsx (not .ts).
- In your editor, select the language mode for TypeScript React/TSX (wording varies by editor).
TypeScript compiler errors because JSX isn’t enabled
TypeScript only parses JSX when configured for it; otherwise you may see compiler errors or failed builds.
- Ensure you are using a TypeScript setup that supports JSX and that the file is .tsx as required for JSX-containing files.
- Follow the TypeScript JSX documentation for the correct project/compiler configuration.
Double-clicking tries to run it or opens the wrong app
.tsx files are source code; operating systems may not know the correct default application and may prompt or choose an unrelated program.
- Open the file from within a code editor using File → Open.
- Set the default app for .tsx to your code editor (file association) and try again.
Security note
A .tsx file is plain-text source code, but it can contain logic that executes when included in an application build/run; treat TSX from untrusted sources as potentially malicious code.