Framer X (Version 22 and later) has a built-in code editor, 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:

  1. Go to any .ts / .tsx  file in your Finder.
  2. Right-click the file and choose “Get Info”.
  3. At the  “Open With…” section, select your editor.
  4. Click “Change All…” and then choose “Continue”.

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, re-try the steps above and select the newest version (if there are two versions).

Did this answer your question?