Code Components

Code Components can extend Framers capabilities by rendering any React Component directly on the canvas. Framer has a built in code editor to write them directly in Framer.

Through Code Components, you can build components for media like audio and video, advanced UI components like counters and sliders, custom components for maps or APIs, and much more.

#React on the Canvas

Framer has you set up with everything you need to make interactive components with React. You can write normal React components and build anything you can do on the web. This allows components that extend Framers functionality and can be directly used to design on the canvas.

#The 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.

Assets Dropdown

To preview your component in real time while editing, click the top right preview button to get a split preview of your work.

Close Preview

If you switch back to "Components", you'll see the component (named after your choice) which you can now drag onto the canvas as often as you like.

#Code Example

Let's look at the very simplest component we could make. That would really just be a vanilla React button component. There really is no magic here, but it already works.

export default function Button(props) {
    return <div>Hello</div>
}

Let's go a step deeper and add some styling. We can do this the standard React way too with `style`.

export default function Button(props) {
    const style = {
        display: "inline-block",
        backgroundColor: "orange",
        padding: 8,
    }

    return <div style={style}>Hello</div>
}

Now, let's make a title prop that is configurable from the interface.

import { addPropertyControls, ControlType } from "framer"

export default function Button(props) {
    const style = {
        display: "inline-block",
        backgroundColor: "orange",
        padding: 8,
    }

    return <div style={style}>{props.text}</div>
}

Button.defaultProps = {
    text: "My Title",
}

addPropertyControls(Button, {
    text: {
        title: "Text",
        type: ControlType.String,
    },
})

And there your have a simple configurable React component, right on the canvas. But I hope you can see how you can use the same concepts to build any React component you like.

Text Property Control

#Property Controls

Like the Smart Components you can design in Framer, Code Components can expose Property Controls that give you a special spot in the UI to change and update properties in your component.

If a Code Component has Property Controls, the Properties Panel will list your controls in a section with the component’s name as its header.

Make sure to read our guide on using Property Controls with Code Components to learn more.

If you're having trouble understanding React, we've written an entire book just for you! Framer's Guide to React is the perfect resource to learn enough about React to become dangerous. It's written from a Designer's perspective, mapping out everything you'll want to know to start writing your own Code Components.

#Framer Motion built-in

Framer Motion is built into every Framer project by default. It's optional, but great to animate any element in your component. To start using Framer Motion in Code Components, simply add the import statement and import what you need from the Framer Motion API.

import { motion, useMotionValue } from "framer-motion"