Framer code hacks

Quick hacks to supercharge your Framer code components.

Controlled vs uncontrolled components

Learn the difference between controlled and uncontrolled components in Framer for better state management.

Token-aware colors and fonts

Learn how to make your Framer components token-aware for consistent themes and styles across your projects.

Default sizing done right for code components

Learn how to set intrinsic sizing for components in Framer to ensure optimal design and usability.

Guard logic for Canvas vs Preview

Learn how to guard your Framer code components for optimal performance in Canvas vs Preview environments.

Group your property controls

Learn to group property controls in Framer for a cleaner, more efficient design experience.

Make code components auto-size correctly on the Canvas

Learn how to ensure your code components auto-size correctly on the Canvas with Framer's layout annotations.

Using Framer’s default props control

Learn how to enhance Framer components with default props and intuitive property controls for a better design experience.

Prevent unlinking of code components in Framer

Learn how to prevent accidental unlinking of code components in Framer with the @framerDisableUnlink snippet.

Custom font selector for code components

Enhance Framer components with custom font controls for easy, error-free typography selection!