April 4, 2025

code snippet
code component

Framer Code Components: Customizing Behavior Per Context

Want your Framer Code Components to act differently in editor vs. live or preview? This guide shows you a simple way to do it using RenderTarget.

David McBacon

Created by

David McBacon
Framer Code Components: Customizing Behavior Per Context

Overview

When developing Framer code components, you need to handle how they behave in different contexts. Sometimes you want your component to behave differently when you're editing it versus when it's live on a website.

For instance, an auto-playing video might be useful for visitors to your site, but can be distracting when you're trying to design your page in the Framer editor.

Framer's `RenderTarget` provides a simple solution. It lets you detect where your component is being rendered and adjust accordingly. Read more about it in the official Framer docs.

Example

import { RenderTarget } from "framer";

export default function FramerComponent() {
  const isOnFramerCanvas = RenderTarget.hasRestrictions();
  // true when rendered in the Framer editor canvas
  // false when rendered in preview or live site

  return (
    <video
      src="https://example.com/video.mp4"
      autoPlay={!isOnFramerCanvas} // don't autoplay in editor
      style={{
        width: 500,
        height: 500,
      }}
    />
  );
}

With this approach, you can create components that adapt to their environment - behaving one way in the editor and another way when published.

Sign up for the newsletter_

Get notifications about the latest Framer components or templates from BACHOFF Studio directly to your inbox.