Make code components auto-size correctly on the Canvas

When a code component collapses to 0 px on drop, it is not broken. Framer just does not know how your component wants to size itself.

The problem

Without an explicit hint, Framer guesses your sizing behavior. That guess can cause zero-height frames, odd stretching, or wrong drag-resize handles.

The fix

Declare the layout behavior with annotations placed directly above your export.

For the blog, use line comments so the Notion → Framer importer does not fail.

Add this as a single TypeScript code block in Notion:

// @framerSupportedLayoutWidth any
// @framerSupportedLayoutHeight fixed
// @framerIntrinsicHeight auto

import * as React from "react"

export default function VideoPlayer(): JSX.Element {
  return (

Why this works

• Framer reads the annotations to understand width and height behavior.

• With any width and fixed height, the component can expand horizontally while keeping a stable height on canvas.

• @framerIntrinsicHeight auto tells Framer to grow the frame to fit rendered content when needed (great for text, accordions, lists).

Bonus: content-driven components

For components that expand based on content, keep the same pattern. Let the width be flexible, keep a sensible minimum height, and use intrinsic height so the canvas box matches the real content.

// @framerSupportedLayoutWidth any
// @framerSupportedLayoutHeight fixed
// @framerIntrinsicHeight auto

type Props = { text: string }

export default function AutoText({ text }: Props) {
  return (
    <div style="{{" width:="" "100%",="" minheight:="" 120,="" padding:="" 16="" }}="">
      <p style="{{" margin:="" 0="" }}="">{text}</p>
    </div>
  )
}

Quick checklist

• One TypeScript code block per example.

• Use // @framer... in articles to keep imports stable.

• In production code, place the real JSDoc annotations directly above the default export.

• Test on canvas: no collapse, correct resize handles, predictable behavior in stacks and grids.