Framer Code Components: Customizing Behavior Per Context

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.

Author: David McBacon