Code Components
A Code Component is an advanced type of component. It is similar to a visual Component, except that its primary is written in code.
Creating a Code Component
Creating a new code component
To create a brand new Code Component, ensure that the code features are enabled in your project by going to the Menu → Code → Always show code.
- To create a Code Component or open the code editor you can use the shortcut command + shift + k or choose code from the dropdown next to Assets.
- You're now given a new templated Code Component, where you can start editing it freely
Your Code Component should show up in the bottom-left Components panel within the canvas UI and in the Insert Menu. If it does not show it means there is likely an error in your code component.
Using an instance of a code component
To create an Instance of a Code Component, open the Insert Menu from the Toolbar and find your component under the Project Components category.
Using Code Components
Anyone can use a Code Component. Framer's Scroll and Page components are both Code Components. You do not need to code in order to use a Code Component—but you can use code to create new ones. Framer includes a default set of Code Components that you can find in the Insert Menu and use in any project.
Property Controls
Like other Components designed in Framer, Code Components can expose Property Controls that change certain properties in the component. If a Code Component has Property Controls, then the Properties Panel will list these inputs in a section with the component's name as its header.
A Code Component's Property Controls are written in code by the component's author. The controls themselves may be more complex than those found in non-code Components, and it's up to the component's author to determine how their values are used. To learn more about a Code Component's properties, open the Insert Menu and select the component to read its description.
Learn more in our article on using Property Controls with Code Components.