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.
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
P or click the Preview icon in the top-right corner and tap on the Frame.
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
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. 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.