Using Code Overrides

Code overrides are JavaScript functions that are executed the moment you render your prototype, which is exactly what happens when you use the Preview to preview your prototype.

They allow you to control your elements and add logic to them, for instance to create simple interactions or more advanced communication between elements.

Overriding the color of a frame

You can find a common example below. This code override will reset the color of a Frame to red, regardless of the background you set on the canvas. If the code syntax is new to you, be sure to check out our Framer Guide to React and API Documentation too.

import { Override } from "framer";

export function MakeRed(): Override {
    return {
        background: "red"
    }
}

Setting a code override

You can write code overrides yourself in code and apply them to any Frame or component in your canvas. These functions allow you to override visual properties like opacity and fill, and allow for interactivity and animation.

Framer will provide you with a couple default code overrides that you can directly apply to any frame on your canvas.

Follow these steps to set one of the default code override on a frame:

1. Draw a frame on the canvas, and draw another frame within it
2. Select your inner blue frame
3. On the right-hand properties panel, collapse the Overrides property
4. Under the File property, select the Examples file
5. Select the Hover override from the options under the Override property that just showed up

Note: Can’t find the overrides property? Ensure you have code enabled in your project

Now preview your screen and hover the inner frame. Our code override causes the frame to scale down when hovered, which is the effect of our Code Override JavaScript function.

From the Overrides property in the properties panel, you can press the Edit Code button to play around with the code yourself.