How to open a .jsx file
JSX source file · Source code
A .jsx file is plain text and any editor opens it. Be aware the extension covers two unrelated things: React component source, and Adobe ExtendScript automation scripts.
What a .jsx file actually is
In web development, JSX is JavaScript with HTML-like syntax embedded, used by React. It is source code that a build tool compiles into ordinary JavaScript.
In the Adobe world, .jsx means an ExtendScript file that automates Photoshop, Illustrator or InDesign. Same extension, completely different purpose.
Both are text, so both open in any editor. What differs is what you do with them next.
Why it will not open
Windows has no association for .jsx, so a double-click asks which program to use. Nothing is missing, and knowing which of the two kinds you have decides what to do.
Renaming it to an extension you can open will not help: changing the extension does not convert the file, it only changes what Windows tries to open it with.
Step by step
Windows
- 01To read either kind: right-click, choose "Open with", then VS Code or Notepad++.
- 02Tell them apart by the content. Imports and a component returning markup means React. References to app.activeDocument means Adobe ExtendScript.
- 03To run an Adobe script, put it in the application's Scripts folder and use File then Scripts inside Photoshop or Illustrator.
- 04React JSX is never run directly. It is compiled by the project build, usually with npm run dev.
macOS
- 01Open it in VS Code or TextEdit with Format set to Plain Text.
- 02Adobe ExtendScript files run from the host application, the same as on Windows.
Programs that open .jsx
Our pick, in order. Every one links to the publisher's official download URL and the SHA-256 hash of the installer. Once you have downloaded it, you can check the file against our index before you run it.
If you end up downloading one of these from somewhere other than the publisher, what you can and cannot verify about that is worth two minutes.
Common questions
- What program opens a .jsx file?
- Any text editor, since JSX is plain text. VS Code and Notepad++ add syntax highlighting. What you do afterwards depends on whether it is React source, compiled by a build tool, or an Adobe ExtendScript, run from inside Photoshop or Illustrator.
- How do I tell React JSX from an Adobe script?
- Read the first lines. React files import from "react" and return markup. Adobe ExtendScript references objects such as app.activeDocument and has no imports.