Code Editor

Note: This article uses Framer's code features. Find out how to enable code features in your project.

Framer includes a powerful code editor to help you explore interactive ideas, play with JavaScript and React, or prototype advanced animations.

All components, animations, and gestures are powered by the Framer Library, a JavaScript library made for rapid interactive prototyping for web and mobile. It powers the code components you create in Framer and the code overrides you apply to Frames.

To learn more, be sure to check out our ES6 and React Guide and API Documentation.

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

Use the 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.

You are generally free to write in regular JavaScript or to not use Typescript in your React components, if you prefer to.

Tip: You can also create .json and .js files within Framer. Just add the preferred extension to the filename when creating a code component or code override asset, and Framer will create an empty JSON or JavaScript file for you instead.

Sample code

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.

Previewing

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.

Auto-complete

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.

Inline Docs

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.