What are Code Components?
Code Components are React Component that can extend Framers capabilities by rendering directly on the canvas, in the preview, and on your published site. They are written directly in Framer using the built-in code editor and preview. View our course on mastering Code Components on the Academy or watch the first video below.
Core Features
Property Controls – Manipulate component props visually.
Auto-Sizing – Custom sizing options to work well in any layout.
Sharing – Shareable with a unique, versioned url.
Basics
To create a new code component, go to the assets panel and select Code. Then, click Create Code File. You'll be presented with a new code file that exports a single React component.
To preview your component in real time while editing, click the top right preview button to get a split preview of your work. The preview will automatically refresh when changes to your component are saved.