Code

Framer X includes a powerful code editor to help you explore interactive ideas—play with React and HTML, prototype advanced animations, and import production components.

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 X and the Overrides you apply to Frames. To learn more, be sure to check out our ES6 and React Guide and API Documentation.

Creating a New File

To create a new code file, navigate to the Code tab in the left-hand panel and click the New button at the top. Once you've given it a name, click New Code Component to create a tsx file. We've included a few example lines of code to get you started—you can edit these right away. To see the default cycle animation, hit CMD + P or click the Preview icon in the top-right corner and tap on the Frame.

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 CMD + F. 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.

Start your free 14‑day trial.

Enter your email and we‘ll send you a download link for later.

We recently introduced Frames and Shapes, so some information in these videos may be outdated. To learn more visit our Help Center.