StencilJS Components in Framer X
If you’re looking to see how StencilJS Web components work inside of Framer X, you’re in the right place.
This type of setup not only allows you to fully use your StencilJS components in Framer X, but also to publish and disribute them to the wider team through the Framer X Team Store.
There are two versions of these components, a set coming from the unpkg CDN, and another set coming directly from the node_modules folder installed in this project. Both versions will work, it just depends on the type of setup you want to use.
This package contains 4 Web Components, modeled after the components used in the framer-bridge-starter-kit. Additionally, these components have added PropertyControls to visually change the props the components are using. You can use these components in a project by installing this package to your Framer X Project!
A flexible button with multiple props to change the appearance.
||Width of button||
||Button disabled state||
An input field with props to change the appearance.
||Input disabled state||
||Input error state||
A usable toggle with props to change it’s state.
||Toggle disabled state||
||Toggle on state||
A tooltip with props to change the appearance.
||Tooltip error state||
This setup is setup in a way that anytime a new version is published to NPM, the components will automatically update in all instances (Even the ones uploaded/downloaded through the Framer X Team Store)!
To learn more feel free to check out this blogpost, or tweet me @addisonschultz.
Opening Package in Framer X...
Don’t have Framer X yet?Start your Free Trial