Framer Code Components and Code Override Masterclass

Code Components

What are Code Components?

Code Components are basically custom React components you build right in Framer. They're for when you need something special that the standard components just can't do. Think of them as really special lego blocks for your file. They fit in just like a regular component in your site - but they can do things that regular components cannot via code.

Why Use Code Components?

• You can create complex, interactive elements that you cannot with regular components

• They're reusable across projects - you can copy and paste them just like a regular component

• Non-coders can still tweak them using Framer's interface via the property controls on the right hand side

• You can treat them like a real product for your customers, push updates & make fixes right from the Framer interface

Structure of a Code Component

// Import necessary Framer libraries
import { addPropertyControls, ControlType } from "framer"

// Component annotations for layout behavior
/**
 * @framerSupportedLayoutWidth auto
 * @framerSupportedLayoutHeight auto
 */

// Main component function
export default function MyComponent(props) {
    // Destructure props
    const { propertyOne, propertyTwo, style } = props

    // Component logic goes here

    // Return JSX
    return (
        <div style={{...style}}>
            {/* Component structure */}
        </div>
    )
}

// Default props
MyComponent.defaultProps = {
    propertyOne: "default value",
    propertyTwo: 0
}

// Property controls
addPropertyControls(MyComponent, {
    propertyOne: {
        type: ControlType.String,
        title: "Property One"
    },
    propertyTwo: {
        type: ControlType.Number,
        title: "Property Two"
    }
})

1. The code starts with importing necessary Framer libraries.

2. Component annotations are used to specify layout behaviour.

3. The main component function is defined, which takes props as an argument.

4. Props are destructured for easy use within the component.

5. The return statement includes a basic JSX structure, often with a parent div that spreads the style prop to support Framer's layout system.

6. Default props are defined to provide initial values for the component's properties.

7. Property controls are added using addPropertyControls. This defines the interface for manipulating the component's props in Framer.

How To Use Code Components

1. Open your Framer project & navigate to the Assets panel located on the left side of the Framer interface

2. In the Assets panel, click on the plus icon "Code" heading, select "New component", name it something relevant and click create.

3. Write your component code, save your code and close the code editor

4. Your new component will appear in the Assets panel as the name of your main function.

5. Drag and drop the component onto your canvas

6. Customize your component with Property Controls on the right hand panel

   

   
   

7. You can copy and paste the component directly by interacting with the component or by clicking on the overflow menu next to the asset in the asset panel, "Copy URL" and pasting it on another project. You can use this url to publicly share your code components.

   

   It should look something like https://framer.com/m/Display-Component-g2sW.js@Kd6PqME7mgeRzBwJ9LKO
   
   If you remove the part after the ".js", your component will automatically send updates to other instances of the component in other projects if you make an update. In this case, the component will look something like https://framer.com/m/Display-Component-g2sW.js

8. To update, just click on update from the left hand panel in the asset panel next to your code component

   

Code Overrides

What are Code Overrides?

Code Overrides in Framer are JavaScript functions that allow you to modify or extend the behavior of existing Framer elements or layers. They act as a wrapper around these elements, enabling you to add interactivity, change properties dynamically, or integrate external data without creating a new component

Why Use Code Overrides?

• They allow you to customize existing Framer elements without recreating them entirely.

• You can add complex interactions and behaviors that go beyond Framer's built-in capabilities.

• State Management: They enable you to create and manage shared states across different elements in your project.

Structure of a Code Override

import type { ComponentType } from "react";

export const withSomeModification = (Component): ComponentType => {
  return (props) => {
    return <Component {...props} modifiedProperty={newValue} />;
  };
};

• It's essentially a React Higher Order Component.

• The function takes a Component as input and returns a new ComponentType.

• It's crucial to spread the original props to maintain the element's existing properties.

• You can add or modify properties as needed.

How To Use Code Overrides

1. Open your Framer project & navigate to the Assets panel located on the left side of the Framer interface

2. In the Assets panel, click on the plus icon "Code" heading, select "New Override", name it something relevant and click create.

3. Write your component code, save your code and close the code editor

4. Select the layer you want to apply the override to, click on the plus icon next to the "Code Overrides" heading on the right hand panel, select your file name and function name & preview it.

   

Code Overrides vs Code Components

In essence, Code Overrides are great for adding interactivity and making quick modifications to existing elements, especially in prototyping stages. They shine when you need to share state or make non-destructive edits.

However, for more complex, reusable components, or when you need full control over the rendering process, Code Components are often the better choice. The decision often comes down to the specific needs of your project and the level of customization required.

Using AI to Generate Component & Overrides

The easiest way to create custom code components is to either train tools like ChatGPT, Claude with some documentation/existing code components and ask them to create components & overrides for you.

An alternative is to use prebuild GPTs like FramerGPT or premium ones like Framer Code Genie

This tutorial from Framer University is a really great tutorial to get you started on your component journey

Using Component Libraries

Another way to speed up this process is to use custom libraries that have already done the hard lifting for you. You can check out our code component library, copy & paste components and be a super-designer in literally 2 clicks. You can also feed some of these component codes into AI tools to modify them as you please. In my experience, LLMs like Claude generally work better with a reference point.

Learn More

The best place to learn code components is the documentation. You can check out:

1. Code Override Documentation

2. Code Component Documentation

Apart from that Framer has a couple of really great courses on their Academy page.

1. Framer Components Course

2. Framer Overrides Course

If you're looking to add third party code components to you site, you can check out

1. Our code component & override Library - the biggest one for Framer

2. Our Freebie Library

If you want to create code components without learning how to code, check out our code genie.