See what's possible in Framer's code editor. Including using the Import Menu, auto-complete, and more.
Opening the code editor
The code editor can be used to work on any Code Component or Code Overrides you have created within the project file. 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
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.
When the code editor is open you’ll see a different top toolbar with something called import this is essentially the code version on the Insert Menu with components available for you to use in code. All you have to do is select a component from the Import Menu, click Import, then the import will appear in your Code Component automatically.
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 Tab or 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.
You can create anything with code then share it with anyone just by sending a link. To copy the link to your Code Component