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 predictable and flexible design.

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

A simple guard to enhance performance by separating editor logic from runtime behavior in Framer components.

Group your property controls

Learn how to enhance your component UX by grouping related property controls for a cleaner, more efficient design.

Make code components auto-size correctly on the Canvas

Learn how to ensure code components auto-size correctly on the Canvas with Framer using TypeScript annotations.

Using Framer’s default props control

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

Prevent unlinking of code components in Framer

Learn how to prevent unlinking of code components in Framer using the @framerDisableUnlink annotation effectively.

Custom font selector for code components

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