Framer for Developers

Framer is a tool built for interactive design. Backed by React, technical users can extend anything through code.

Open Playground
Get Started with Code

React Components

Code Components

Write flexible React Components right in Framer’s built-in code editor.

  • Build your own icon kit
  • Add a scale or perspective tool
  • Build a custom video player
Code Components DocsReact Components Docs

Higher-Order Components

Code Overrides

Write functions and apply them to any element on your canvas.

  • Pass data between text inputs
  • Dynamically display data from an API
  • Create custom gesture animations
Code Override DocsHigher-Order Component Docs

The power of the browser with the freedom of a canvas

Pairing canvas with code means you can express ideas faster. If it’s possible in the browser, it’s possible in Framer.

Built-in editor

A faster code editor with useful starting files, types, in-browser transpiling, and concise errors.

Learn about the editor

Share instantly

Create anything with code then share with anyone just by sending a link.

Learn about sharing

NPM Supportbeta

Use your favorite NPM packages in any Code Component with a single import.

Learn about importing

Import Menu

Import Smart Components designed on the Framer canvas into your Code Components.

Learn about importing

DOM Auto Sizing

Get access to DOM auto sizing in the code editor for easy layout formatting in your components.

Learn about Auto Sizing

Framer Motion

Animations you create in Framer can be used 1:1 in production with Framer Motion.

Learn about Framer Motion
Alpha Feature

Run Framer components in production with simple import statements.

We’ve launched a new groundbreaking experimental feature that lets you import your Framer components directly into your React code.

Learn more
A code editor showing an import statement.

Built with code

Explore what’s possible with code in Framer.

Face Tracking

Face Tracking

Utilize machine learning libraries to create unique camera-based interfaces.

Firebase

Real data from Firebase

Embed a real-time chat in your interactive designs.

react-three-fiber

Integrating with react-three-fiber

Render interactive 3D elements in Framer using react-three-fiber.

Arduino

Hook up to Arduino

Connect to close the gap between hardware and software.

With the ability to code in Framer we’ve been able to create custom UX writing linters, text components with markdown, and resource components for all our brand icons—this would never be possible in other tools.

Join our Discord server with over 8,000 developers & designers

Get support in dedicated code channels, explore new ideas, and showcase your work.

Join the Discord server