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