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.
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.
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.
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.
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.
”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.“