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! 😀
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.
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.
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.
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!
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...
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.
Really cool experiment!
This is amazing
Curious if this will be part of Lona 🤔