Render code. On the canvas.

Turn basic HTML/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

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

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 alignment and style. One component, synchronized across canvas and code.

Try Framer X for free

Coming Soon

Framer Playground

A brand new environment to explore ideas in code. Get ready for a powerful code editor, live preview experience, extensive API documentation, and advanced animation libraries for rapid prototyping—all in Framer X. Sign up to get notified as soon as it launches.

A familiar environment to explore ideas in code, right from within Framer. Sign up to get notified as soon as we launch.

“I welcome every designer trying Framer X to the ReactJS 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

Get Framer X

Bring code into your designs.

Try for free
Framer App

Start your free 14‑day trial.

Enter your email and we‘ll send you a download link for later.

We recently introduced Frames and Shapes, so some information in these videos may be outdated. To learn more visit our Help Center.