Note: This article uses Framer's code features. Find out how to enable code features in your project.
Opening the code editor
When code is enabled in your project, head to the Code panel on the left side of the interface to find all code component and code override files in your project.
Creating a code file
Create Asset button in the bottom-left to create a new code override or code component file. Framer will automatically turn these into a
.tsx TypeScript file as Framer supports TypeScript by default.
Tip: You can also create
Depending on whether you create a new code override or code component, we provide your new
.tsx file with a sample code component or various code overrides to get started.
Framer’s preview opens by default within the code editor. If closed, the preview can always be reopened by hitting
⌘ + P for Mac or
Ctrl + P for Windows or by clicking the Preview icon in the top-right corner.
The preview is shown on the right-hand side of the code editor, allowing you to code while seeing live changes happen in the preview.
Tip: Control the amount of space that the preview and editor should have by dragging horizontally between the editor and the preview.
Our auto-complete feature will make suggestions based on the code you’re typing and the context around it. As you’re typing, you’ll see suggestions like variables, functions, and methods.
Select the option you want, and press
Enter to add it to your code. You can turn on auto-complete at any time by hitting Control + Space.
Hover over any keyword to see related documentation including explanations, properties, and code examples.
Find & Replace
To find a word or phrase in the file you're working in, press
⌘ + F for Mac or
Ctrl + F for Windows. The search field will appear in the top-right corner of the code editor, and will highlight every occurrence of whatever you search for.
You can navigate through these by clicking the arrow buttons. If you'd like to replace an occurrence with a different word or phrase, expand the menu by clicking the
▸ button to the left of the search field.
Enter your replacement in the bottom field, then click
Replace. To replace all occurrences, choose the
Replace All button instead.