What are Code Overrides?

Code Overrides are small functions that you can use to modify the properties or functionality of any layer in Framer. They are applied to the layer on the canvas, however they are only active in the preview and on your published site. View our course on mastering Code Overrides on the Academy or watch the intro below.

You might not need Code Overrides

Overrides give you control over the rendering of any Layer in Framer, which in turn means it can be easy to unintentionally break the built in functionality of Framer. Recently, many of the common use cases for Overrides have been replaced by first class features which are optimised by default and less likely to break things.

Getting Started

You can create Code Overrides directly inside Framer. Go to the properties panel and create a new file under the Code Overrides section. This will create an Examples file by default where you can see examples of common Code Overrides.

Create a code override in Framer

A Basic Override

The is the basic code for any Override, which is essentially a normal React Higher Order Component. The example below modifies the opacity property of the element it is applied to. Framer uses TypeScript types to detect your overrides, hence the ComponentType. It is important to always apply the existing props, otherwise you may break the appearance or functionality of your Layer.

import type { ComponentType } from "react";

export const withLowerOpacity = (Component): ComponentType => {
  // This part of the code is only run once when creating the component
  // You usually do not need anything here.
  
  return (props) => {
    // This part runs every time the component is rendered.
    return <Component {...props} style={{ ...props?.style, opacity: 0.5 }} />;
  };
};

Now that you have your new Override, you can apply it to any element on the canvas from the same section in the property panel. If you now preview or publish your site, the element will have an opacity of 0.5.

Framer

Framer