Working with code in Framer
Extend your prototypes with code using Code Components and Overrides.
Code Components
Write flexible React Components right in Framer’s built-in code editor.
Overrides
Write functions and apply them to any element on your canvas.
The improved version of Code Components in Framer no longer use the Framer Library—keep reading to learn more about migrating your old Code Components or head over to the legacy documentation to maintain them.
Guides
Code Components
Write flexible React Components right in Framer’s built-in code editor.
Smart Components
Add extra functionality to your Smart Components through code.
Code Overrides
A way to share data between components within Framer.
Auto Sizing
How to have your components size automatically on the Framer canvas.
Sharing Code
How to share code between projects and within the ES modules ecosystem.
Importing External Code
How to use code from other sources such as NPM or es-module CDNs.
Migrating from Legacy Code
Coming from legacy code in Framer there are few changes to aware of in order to take full advantage of the new features.
Handshake
Use your Framer components in your React code.