[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"extension:v3:en:tsx":3},{"resolvedFromAlias":4,"canonicalExt":5,"ext":5,"name":6,"category":7,"categoryName":8,"updatedAt":9,"popularity":10,"summary":11,"howToOs":12,"quickAnswer":18,"answerIntro":19,"whatIs":20,"description":21,"furtherReading":22,"openInstructions":41,"commonIssues":55,"securityNotes":74,"faq":78,"aliases":91,"mimeTypes":92,"relatedExtensions":93,"breadcrumbs":141,"categoryAnchor":151,"categoryFuturePath":152,"metaDescription":153,"availableHowToOs":154,"openOnDeviceLinks":155,"cannotOpenReasons":171,"cannotOpenFixes":172,"convertOptions":173,"securityAffiliateMessaging":174,"securityAffiliates":175},false,"tsx","TypeScript JSX (TSX) source file","code","Code","2026-06-12T08:00:52.088Z",75,".tsx is a TypeScript source code file that contains JSX syntax, commonly used with React-style UI components. You open it in a code editor (for viewing/editing) and build it with TypeScript tooling (for running in apps).",[13,14,15,16,17],"windows","mac","linux","ios","android","To open .TSX files on Windows, right-click the .tsx file and choose Open with → Visual Studio Code (or another code editor).","To open a .tsx file, use a source-code editor such as Visual Studio Code or another text editor. If you want it to run, it must be compiled/transpiled as part of a TypeScript project that supports JSX.","A TSX file is a TypeScript file that embeds JSX (XML-like syntax used to describe UI elements). TypeScript’s JSX support expects JSX-containing code to be saved with the .tsx extension so the compiler parses it correctly. TSX is plain text source code, not a standalone executable format.","TSX is the conventional file extension for TypeScript code that includes JSX. TypeScript introduced the .tsx extension to support embedding JSX directly in TypeScript source files, enabling typed UI component code that looks similar to JSX used in JavaScript.",[23,26,29,32,35,38],{"title":24,"url":25},"TypeScript Handbook: JSX","https://www.typescriptlang.org/docs/handbook/jsx",{"title":27,"url":28},"What’s new in TypeScript 1.6 (TypeScript Wiki): .tsx extension for JSX","https://github.com/microsoft/TypeScript/wiki/What%27s-new-in-TypeScript/181ee76e7a8a5160dfd3ca7c334113d5955a1161",{"title":30,"url":31},"JavaScript XML (JSX) overview (Wikipedia)","https://en.wikipedia.org/wiki/JavaScript_XML",{"title":33,"url":34},"TSX File: What is a .tsx file and how do I open it? (FileInfo)","https://fileinfo.com/extension/tsx",{"title":36,"url":37},"IANA Media Types registry (for checking official MIME registrations)","https://www.iana.org/assignments/media-types",{"title":39,"url":40},"Shared MIME-info Database specification (freedesktop.org)","https://specifications.freedesktop.org/shared-mime-info-spec/latest-single/",{"windows":42,"macos":45,"linux":48,"ios":51,"android":53},[43,44],"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.",[46,47],"Right-click (or Control-click) the .tsx file → Open With → a code editor (for example, Visual Studio Code).","If macOS asks for an app, pick a code editor or open it from within the editor using File → Open.",[49,50],"Open the .tsx file with your preferred code editor (for example, Visual Studio Code) from the file manager or via the editor’s Open command.","If it opens as plain text without highlighting, set the language mode to TypeScript/TSX in the editor.",[52],"Use a text/code editor app that can view plain-text source files; for full TypeScript/JSX workflows, transfer the file to a desktop environment.",[54],"Open the file with a text editor that can display plain text; for compiling/building TSX, move the project to a desktop setup.",[56,62,68],{"title":57,"description":58,"steps":59},"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.",[60,61],"Confirm the file extension is .tsx (not .ts).","In your editor, select the language mode for TypeScript React/TSX (wording varies by editor).",{"title":63,"description":64,"steps":65},"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.",[66,67],"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.",{"title":69,"description":70,"steps":71},"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.",[72,73],"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.",[75,76,77],"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.","Be cautious with projects that include build scripts and dependencies: opening a .tsx file is safe as text, but running install/build/test commands can execute code.","If you use editor extensions that automatically run code actions or project scripts, review what they do before trusting an unknown TSX project.",[79,82,85,88],{"question":80,"answer":81},"Is .tsx the same as .ts?","Both are TypeScript source files, but .tsx is used when the file contains JSX. TypeScript’s documentation states that files containing JSX should use the .tsx extension.",{"question":83,"answer":84},"What is JSX and why is it inside TypeScript?","JSX is an XML-like syntax used in JavaScript ecosystems to describe UI structure. TypeScript supports JSX, and TSX is the standard extension for TypeScript files that embed JSX.",{"question":86,"answer":87},"Can I open a .tsx file in a normal text editor?","Yes. TSX is plain text, so any text editor can open it. A code editor is recommended for syntax highlighting and TypeScript/JSX-aware features.",{"question":89,"answer":90},"When did TypeScript start using .tsx?","TypeScript introduced the .tsx file extension to support embedding JSX starting with TypeScript 1.6.",[],[],[94,100,105,111,117,123,129,135],{"ext":95,"name":96,"category":7,"categoryName":8,"popularity":97,"summary":98,"howToOs":99},"php","PHP script (PHP source code)",85,".php files typically contain PHP source code used on web servers to generate dynamic web pages and API responses. You can open them in a code editor, but they are usually executed by a web server (often via PHP-FPM) rather than “run” like a normal desktop app.",[13,14,15,16,17],{"ext":101,"name":102,"category":7,"categoryName":8,"popularity":97,"summary":103,"howToOs":104},"sql","SQL script (Structured Query Language)",".sql files contain SQL statements (queries, schema definitions, and data changes) that can be run by a database tool or opened as plain text for review and editing.",[13,14,15,16,17],{"ext":106,"name":107,"category":7,"categoryName":8,"popularity":108,"summary":109,"howToOs":110},"cs","C# source code file",80,".cs files contain C# source code used to build .NET applications and libraries. They are plain-text files typically edited in code editors and IDEs such as Visual Studio Code with C# tooling.",[13,14,15,16,17],{"ext":112,"name":113,"category":7,"categoryName":8,"popularity":114,"summary":115,"howToOs":116},"go","Go source file",78,".go files contain source code written in the Go (Golang) programming language. You can open them in code editors (for reading/editing) or build/run them with the Go toolchain.",[13,14,15,16,17],{"ext":118,"name":119,"category":7,"categoryName":8,"popularity":120,"summary":121,"howToOs":122},"kt","Kotlin source file",72,".kt files contain Kotlin source code used to build Kotlin applications (including Android apps) and libraries. You typically open them in a code editor or IDE such as IntelliJ IDEA or Android Studio.",[13,14,15,16,17],{"ext":124,"name":125,"category":7,"categoryName":8,"popularity":126,"summary":127,"howToOs":128},"swift","Swift Source Code",70,".swift is a Swift programming language source file used to write apps and other software. You open it in code editors and IDEs such as Xcode or other text/code editors.",[13,14,15,16,17],{"ext":130,"name":131,"category":7,"categoryName":8,"popularity":132,"summary":133,"howToOs":134},"dart","Dart source code",65,".dart files contain source code written in the Dart programming language. You open them in a code editor/IDE or work with them using the Dart SDK tools.",[13,14,15,16,17],{"ext":136,"name":137,"category":7,"categoryName":8,"popularity":138,"summary":139,"howToOs":140},"proto","Protocol Buffers schema (Protocol Buffers definition file)",60,".proto files define data structures and services for Google’s Protocol Buffers. They are plain-text schemas that you open in a text editor/IDE or compile with the Protocol Buffers compiler (protoc) to generate code.",[13,14,15,16,17],[142,145,148],{"label":143,"to":144},"Home","/",{"label":146,"to":147},"File Extension Index","/file-extension",{"label":149,"to":150},".TSX","/file-extension/tsx","category-code","/category/code","Learn what .TSX files are, how to open them on every platform, common fixes, and security best practices.",[13,14,15,16,17],[156,159,162,165,168],{"os":13,"label":157,"to":158},"Open .TSX on Windows","/how-to/open-tsx-on-windows",{"os":14,"label":160,"to":161},"Open .TSX on Mac","/how-to/open-tsx-on-mac",{"os":15,"label":163,"to":164},"Open .TSX on Linux","/how-to/open-tsx-on-linux",{"os":16,"label":166,"to":167},"Open .TSX on iOS","/how-to/open-tsx-on-ios",{"os":17,"label":169,"to":170},"Open .TSX on Android","/how-to/open-tsx-on-android",[57,63,69],[60,61],[],"code_runtime",[176,180],{"name":177,"description":178,"affiliateUrl":179},"Avast","Avast offers free and premium antivirus software that protects against viruses, malware, ransomware, and phishing. Scan files before opening them to ensure safety.","https://www.avast.com/lp-aff-consumer-store?expid=inf601",{"name":181,"description":182,"affiliateUrl":183},"Norton","Norton 360 delivers comprehensive antivirus protection, VPN, and identity theft monitoring. Scan files for threats before opening to keep your device secure.","http://buy.norton.com/aff_home?utm_campaign=en-ww_nor_n36_aff_nas_nau_nah_cj_nad_low:_sec_nat_mktc_norton_360"]