--- title: "Framer Developers: Introduction" description: Intro to Overrides published: "Sep 18, 2026, 4:28 PM UTC" --- # [What are Code Overrides?](#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. Please note,** overrides must use React 18 compatible code**. This includes using `forwardRef` to ensure effects and links keep working when overriding the associated layer. ### [You might not need Code Overrides](#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 optimized by default and less likely to break things. - Animating Text & Layers → [**Effects**](https://www.framer.com/academy/topics/effects) - User Interactions → [**Components**](https://www.framer.com/academy/lessons/components) - Using Dynamic Data → [**Fetch**](https://www.framer.com/academy/lessons/fetch) ### [Getting Started](#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. ### [A Basic Override](#a-basic-override) This is the basic code for any Override, which is essentially a normal [React Higher Order Component](https://legacy.reactjs.org/docs/higher-order-components.html). 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. 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. [Previous Reference](./components-reference) [Next Examples](./overrides-examples) --- ## Navigation - [Enterprise](../enterprise/) - [Pricing](../pricing) - [Log in](https://framer.com/r/login) - [Sign up](https://www.framer.com/r/signup/) - [Brand guidelines](../brand) - [AI New](../ai/) - [Agents New](../agents/) - [External Agents New](../agents/external/) - [Design](../design/) - [Collaborate New](../collaborate/) - [CMS](../cms/) - [Hosting](../hosting/) - [Performance](../performance/) - [SEO](../seo/) - [Convert](../convert/) - [Publish](../publish/) - [Updates New](../updates) - [Academy](../academy/) - [Guides](../guides) - [Desktop app](../downloads/) - [Blog](../blog/) - [Newsletter](../newsletter) - [Stories](../stories/) - [Creators](../creators) - [Experts](../expert/apply/) - [Students](../education/students/) - [Ambassadors](../education/ambassadors/) - [State of Sites](https://www.framer.com/state-of-sites-2026/) - [Stack Score New](../stack-score/) - [Help Articles](../help/) - [Contact](../contact/) - [Startups](../startups/) - [Agencies](../agencies/) - [Switch](../switch/) - [Careers](../careers/) - [Brand](../brand) - [Store](../store) - [Security](../legal/security) - [Abuse](mailto:abuse@framer.com) - [Legal](../legal/community-terms) - [Trust](https://app.eu.vanta.com/framer.com/trust/ow67ujg7iav0t6qtd1o6r2) - [Designers](../solutions/designers/) - [Agencies](../solutions/agencies/) - [Marketers](../solutions/marketers/) - [Growth](../solutions/growth/) - [Builders](../solutions/builders/) - [Engineers](../solutions/engineers/) - [Site Teams](../solutions/site-teams/) - [Founders](../solutions/founders/) - [AI website builder](../solutions/ai-website-builder/) - [AI design agent](../solutions/ai-designer/) - [Website builder](../solutions/website-builder/) - [Landing pages](../solutions/landing-pages/) - [Portfolio maker](../solutions/portfolio-website/) - [UI/UX design](../solutions/ui-ux-design/) - [No-code](../solutions/no-code-website-builder/) - [Overview](../compare) - [Webflow](../compare/framer-vs-webflow) - [Figma](../compare/framer-vs-figma) - [Wix](../compare/framer-vs-wix) - [Squarespace](../compare/framer-vs-squarespace) - [WordPress](../compare/framer-vs-wordpress) - [Readymag](../compare/framer-vs-readymag) - [Ceros](../compare/framer-vs-ceros) - [Unbounce](../compare/framer-vs-unbounce) - [Lovable](../compare/framer-vs-lovable) - [Claude Code](../compare/framer-vs-claude-code) - [ChatGPT](../compare/framer-vs-chatgpt) - [Codex](../compare/framer-vs-codex) - [Contentful](../compare/framer-vs-contentful) - [Sanity](../compare/framer-vs-sanity) - [AEM](../compare/framer-vs-adobe-experience-manager) - [Replit](../compare/framer-vs-replit) - [v0](../compare/framer-vs-v0) - [Marketplace](https://www.framer.com/community/marketplace/) - [Templates](https://www.framer.com/community/marketplace/templates/) - [Components](https://www.framer.com/community/marketplace/components/) - [Plugins](https://www.framer.com/community/marketplace/plugins/) - [Vectors](https://www.framer.com/community/marketplace/vectors/) - [Feed](https://www.framer.com/community/feed/) - [Hype](https://www.framer.com/community/hype/) - [Gallery](https://www.framer.com/community/gallery/) - [Contests](https://www.framer.com/community/contests/) - [Members](https://www.framer.com/community/members/) - [Meetups](../meetups/) - [Updates](../updates/community/) - [Figma to HTML](../solutions/figma-to-html/) - [AEO scanner](../aeo) - [Meta Tags](https://www.linkpreview.app/) - [Free domains](../domains/) - [CanvasBench](../canvasbench/) - [Shortcuts](../shortcuts) - [Checking status](https://www.framerstatus.com/) - [504,616,418,546 tokens processed this week](https://openrouter.ai/apps/framer)