Technical Notes
Sygnal Components leverages two types of Webflow components;
Native Components ( NCs ) are Webflow's element-based components that are built and styled directly in the designer.
Code Components ( CCs ) are React-based components that are developed outside of Webflow using traditional React development tooling.
We also leverage Shared Libraries for maximum reusability of NCs.
Code Components have very different capabilities from Native Components, which makes each approach ideal for different use cases.
Capabilities
Availability
Available now, all plans
Rolling out now to paid workspace plans and paid site plans
Will not be available on free workspace / free site setups
Technology
Based on standard designer-controlled elements, classes, and variables.
React-based components, built using React development tools outside of Webflow
Development process
Build entirely in the designer.
Build outside of Webflow.
Code support
Virtually none, however creative techniques can be used to achive some support for component-specific code, and to support library dependencies.
Fully code-based, typically using JS or TypeScript.
Properties Support
Variant Support
One variant property per component
Affects classes only
Supports multiple variant properties per component
Can be used to fundamentally change the behavior of the component
Styling
Localization
Properties can be localized
Component content can be localized
??? Assuming Properties only
Deployment Paths
Deploying to a site
Can build the NC directly in the site
Or install from a workspace Shared Library
Deploy the CC to the workspace, using an authorized API_KEY
Import the CC lib into the project. All components are then available.
Sharing to sites in a Workspace
Clone the project
Clean out all non-NC content
Turn the project into a Shared Library
The components will be accessible to other sites in the same Workspace. Note that in shared lib form, styling rules change significantly.
Same as above, CC libs are installed at the workspace level.
Sharing to another Workspace
Clone the project
Transfer to the target workspace
Client then sets it up as a shared lib
Client then installs that lib on their desired project
Cross-workspace updates are not possible currently.
Same process as above, but must auth and setup a separate API_KEY for each workspace.
Sharing to the Community
? Cloneable + instructions Note that shared libs cannot currently be exposed as cloneables, which complicates update processes.
? Github repo + instructions
Currently components are not supported for cross-project copy-paste, or in Marketplace Libs.
Last updated