How do I change my default code editor?
Framer X (Version 22 and later) has a built-in code editor which comes with a lot of benefits, but it’s possible to work with an external code editor if that is better suited to your workflow.
To edit code externally, go to
View > Editor > External.
Any editor will work, but we strongly suggest one that supports TypeScript (for auto-complete). Our favorite is VSCode by Microsoft with the Prettier extension so your code is always formatted consistently.
Follow these steps to change your default editor:
- Go to any
.tsxfile in your Finder
- Right-click and choose
- At the
Open With…section select your editor
Change All…and then choose
Keep in mind
You may have to restart your editor in order for Framer X to notice the new default choice. You might get an error if you were in the middle of updating your code editor to the latest version. If that happens, retry the steps above and select the newest version (if there are two versions).