This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Devin Abbott
Posted Dec 20 - Read on Facebook

Framer is great for interaction design, and React is great for building complex UIs -- why not combine the two?

I put together a proof-of-concept called react-framer: https://github.com/dabbott/react-framer/

With react-framer, you can use React to build Framer prototypes! There are a lot of React/Framer features missing, and I haven't tried it in Framer Studio yet, but I think there's a lot of promise here.

Check it out, and let me know what you think! 😀

13 Comments

Davo Galavotti

Wow Devin, this is so cool! Thanks for piecing this together. I tried and failed so many times trying to accomplish this.

My main blocker was the setup... every time. To make an abstraction of the Framer requirements, in Webpack. That pretty much depleted my mental capacity.

Carlos Santiago

Joe Alfonso👀

Chad Lonberger

Awesome! There are some threads on the git repo about building a react version of framer, might check to see any prior (limited) work that was done.

Andrew Liebchen

This is amazing. I love JSX syntax for Framer. I brought this up with Koen a few months ago, but they didn’t seem interested in changing the API. If anything, they work looking at React for their DOM rendering and management.

Felix Haus

Very cool proof of concept, I think writing Layers with JSX could speed things like parent / children layer definitions up.
Another point is that React provides by design some kind of code splitting (components) which could enable us to write more efficient code.
As a programmer I am really happy about that possibilities but maybe that's not what framer is aiming for with it's product.
Framer is for me more a fast and hacky prototyping tool than for writing nearly production ready applications.
I love framer as much I love react, but react is so big that I think it doesn't really need framer as a wrapper. So integrating react into framer would kill framer.js in the long term.
But we will see where this goes really excited and thanks for sharing with us!

Andrew Liebchen

Should put this in the main thread. This isn’t “React” this is just the JSX syntax for the Framer API. Simply another way to work with Framer. This doesn’t have React’s state machine, or props flow, etc...

Andrew Liebchen

Devin Abbott Oh my god I'm in love. I do a lot of stateful desktop prototypes, and this may be just what I've always wanted. Early xmas gift.

Video below I use React's state and pass props into my component.

Jordan Robert Dobson

Following...

Koen Bok

Really cool experiment!

Felio Sotomayor

This is amazing

Luis Ricardo La Torre

Fire

Luis Ricardo La Torre

Curious if this will be part of Lona 🤔

Read the entire post on Facebook