Prevent unlinking of code components in Framer

Prevent unlinking of code components in Framer

Sometimes you need components to stay connected to their source so updates remain centralized. Here’s the cleanest way to prevent accidental unlinking in Framer.

The magic code snippet

Place this annotation block directly above your component:

What’s going on?

• @framerDisableUnlink keeps the component tied to its source so it can’t be unlinked via the UI.

• Pair with intrinsic size annotations for a predictable initial footprint on canvas.

• Avoid sensitive info in client‑side code. This prevents unlinking in the UI, not reading source.

Best practices

• Put the annotation block immediately above the default export.

• Combine with other layout annotations you already use.

• Validate behavior with a fresh import in a test file.

Wrapping up

Use @framerDisableUnlink to maintain consistency and prevent accidental drift. Simple, effective, and keeps systems tidy.

// @framerDisableUnlink
// @framerIntrinsicWidth 200
// @framerIntrinsicHeight 200

//--------main component---------

export default function MyComponent(props) {
  return <div>…</div>
}