A hackable design tool.

A revolutionary way to render React and HTML/CSS as design elements.

Visually render React, learn how to design advanced animations, and import production components. It’s a better way to bridge design and code, all on one canvas.

Try Framer X for free

Render code. On the canvas.

Turn basic HTML and CSS or advanced React components into visual elements. Best-in-class documentation and simple syntax help you build anything you can imagine. If it works on the Web, it works on your Framer X canvas.

Try Framer X for free

From design to code and back.

Import design elements from your canvas into code components. Use code to add logic and data, then go back to the canvas to tweak style. One component, synchronized across canvas and code.

Try Framer X for free

Build your own custom interface.

Create a component and give it unique UI controls, so you can reuse it across your projects. Or package it up to share with your team. From colors and strings to files and numbers, every property can be surfaced and customized.

Try Framer X for free

Animations, unlike any other.

Experiment, play, and create more unique interactions. Powered by the Framer Library, you can unlock a set of helpers for designing physics-based animation, touch-based gestures, and components.

Try Framer X for free

Handoff, made easy.

Any animations and interactions you design can be used one-to-one in production, thanks to Framer Motion, the open source React library powering Framer X.

Discover Framer Motion ›

I welcome every designer trying Framer X to the React community. Please feel at home—we love to help you learn and answer questions! React components transformed sharing UI code for me. I hope that the Framer X Store will empower so many more people to experience the same.

Dan Abramov, ReactJS

Try Framer X

Bring your creative ideas to life.

Try for Free
Framer App