Working with non-React components in Framer

Framer internally uses React to describe and render components. However, in some cases, you can write a generic React wrapper for JavaScript components that you want to use in Framer.

Note: the suggestions in this article often rely on using npm dependencies in your project, which is currently a feature only available in the desktop app to those on the Pro-plan.

Web Components (Stencil/Polymer)

Since Web Components are simply HTML, it is pretty easy to use them in Framer. Check out this article to learn how to set up a Design System using Stencil Components.

You can also check out this package to see an example of Polymer components in Framer.

Vue.js

Frameworks like Vue require a bit more work to set up, but are still possible to use. Check out this package to see an example of Vue.js components in Framer.

Other Frameworks

Some frameworks like React Native, Angular, and Preact aren’t directly possible to use in Framer, but are still on our radar for us to further explore the possiblities.