Using Framer’s default props control

Using Framer’s default property controls

Providing an intuitive experience for designers is critical. Framer’s built‑in property controls and sensible defaults make components easier to use and harder to break.

The magic code snippet

Here’s a minimal example using default props and a string control:

import { addPropertyControls, ControlType } from "framer"

export function MyComponent(props) {
	return <div>{props.text}</div>
}

MyComponent.defaultProps = {
	text: "Hello World!",
}

addPropertyControls(MyComponent, {
	text: {
		type: ControlType.String,
		title: "Text",
		defaultValue: "Hello World!",
	},
})

What’s going on?

• Default props ensure the component renders reliably even before any customization.

• addPropertyControls exposes friendly inputs for designers right in the properties panel.

• Keeping controls simple improves stability and prevents canvas‑time errors.

Why use this?

• Consistent component instances across the project

• Clear guidance for designers without digging into code

• Fewer runtime surprises and smoother iteration

Wrapping up

Leverage default props plus a small set of well‑named controls. You’ll ship components that are quick to drop in and hard to misuse.