Using Code In Framer

Framer allows you to create fully fledged, interactive prototypes without leveraging any code whatsoever.

However, as Framer is built on the web and made with web technologies itself, you can also leverage code yourself if you’d like to learn how to or if you are already familiar with code.

By default, the ability to add code within your projects is hidden. Though if you are working in an existing project that already contains code, code features are automatically enabled.

Enabling code

To enable code within Framer, follow these steps:

  1. On the top-left of your interface, open the menu
  2. Head to the Code section at the bottom
  3. Select your preferred option regarding showing code

The options from which you can choose are to Show Code When Used, Always Show Code, and Always Hide Code.

Using code in Framer

Framer allows you to use code in two main ways, namely code components and/or code overrides.

Code components

Code components are (React) components that you create from scratch or pull in from existing projects/design systems.

These can then be implemented into your project however you want them to be.

Find out more about code components ›

Code overrides

Code overrides are JavaScript functions applied on top of visual elements drawn on the canvas, enabling you to add logic or styling to the element after they are rendered in a preview.

Find out more about code overrides ›

API

Whenever you use a Page component, or set a Magic Motion transition, Framer relies on its own API. You can use the API freely with any code you write, with extensive documentation being available.

If you’re looking to create components that you’d also like to use in production, you can use the Framer Motions API. Both API’s are fully functional within Framer, but the Framer Motion API is made to be production ready while the Framer API is not.

Framer Motion is incredibly powerful, and allows you to create simple and complex animations with less code than ever before.

Find out what Framer Motion is capable of ›