Using an external code editor with the desktop app
Note: This article refers to the Framer desktop app. Learn more about the differences between the Framer web and desktop app here.
This article uses Framer's code features. Find out how to enable code features in your project.
Framer has a built-in code editor which comes with a lot of benefits. If you are working with the Framer desktop app, however, it’s also possible to work with an external code editor if that is better suited to your workflow.
Setting Framer to use an external code editor
Framer can be told to use the external code editor by default. This means that if you e.g. try to edit a code override from the properties panel on the canvas, Framer will open the override file in an external code editor.
To enable this, follow these steps.
- From the Menu, go to View
- Under Editor, select External
Any editor will generally 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.
Setting your Mac’s default code editor
If you’d like to change your Mac’s default code editor, you can follow these steps.
- Go to any
.ts/.tsxfile in Finder - Right-click and choose Get Info
- At the Open With… section select your preferred editor
- Click Change All… and then choose Continue
Keep in mind
You may have to restart your editor in order for Framer 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).