# Technical Notes

Sygnal Components leverages two types of Webflow components; 

* [**Native Components ( NCs )**](https://help.webflow.com/hc/en-us/articles/33961303934611-Components-overview) are Webflow's element-based components that are built and styled directly in the designer.  
* [**Code Components ( CCs )**](https://developers.webflow.com/code-components/introduction) are React-based components that are developed outside of Webflow using traditional React development tooling.  

We also leverage [Shared Libraries](https://webflow.com/updates/libraries) for maximum reusability of NCs. 

{% hint style="warning" %}
Code Components have very different capabilities from Native Components, which makes each approach ideal for different use cases. 
{% endhint %}

## Capabilities

|                     | Native Components ( NCs )                                                                                                                                                                                                                     | Code Components ( CCs )                                                                                                                                                                         |
| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Availability        | Available now, all plans                                                                                                                                                                                                                      | <ul><li>Rolling out now to paid workspace plans and paid site plans </li><li>Will not be available on free workspace / free site setups </li></ul>                                              |
| 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.                                                                                                                                                                                                               | <ul><li>Build outside of Webflow.</li><li><a data-footnote-ref href="#user-content-fn-1">Can use DevLink to export Webflow content, program it, and re-import it into a project. </a></li></ul> |
| Code support        | <p>Virtually none, however <a href="https://www.sygnal.com/lessons/custom-code-in-shared-lib-components">creative techniques</a> can be used to achive some support for component-specific code, and to support library dependencies.<br></p> | Fully code-based, typically using JS or TypeScript.                                                                                                                                             |
| Properties Support  |                                                                                                                                                                                                                                               |                                                                                                                                                                                                 |
| Variant Support     | <ul><li>One variant property per component</li><li>Affects classes only</li></ul>                                                                                                                                                             | <ul><li>Supports multiple variant properties per component</li><li>Can be used to fundamentally change the behavior of the component</li></ul>                                                  |
| Styling             |                                                                                                                                                                                                                                               |                                                                                                                                                                                                 |
| Localization        | <ul><li>Properties can be localized</li><li>Component content can be localized</li></ul>                                                                                                                                                      | ???  Assuming Properties only                                                                                                                                                                   |

&#x20;

## Deployment Paths&#x20;

|                                 | Native Components ( NCs )                                                                                                                                                                                                                                                                                                                                 | Code Components ( CCs )                                                                                                                                          |
| ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Deploying to a site             | <ul><li>Can build the NC directly in the site</li><li>Or install from a workspace Shared Library</li></ul>                                                                                                                                                                                                                                                | <ul><li>Deploy the CC to the workspace, using an authorized API\_KEY</li><li>Import the CC lib into the project.  All components are then available.  </li></ul> |
| Sharing to sites in a Workspace | <ul><li>Clone the project</li><li>Clean out all non-NC content</li><li>Turn the project into a Shared Library</li></ul><p><mark style="color:$success;">The components will be accessible to other sites in the same Workspace.</mark><br><br><mark style="color:$warning;">Note that in shared lib form, styling rules change significantly.</mark> </p> | Same as above, CC libs are installed at the workspace level.                                                                                                     |
| Sharing to another Workspace    | <ul><li>Clone the project</li><li>Transfer to the target workspace</li><li>Client then sets it up as a shared lib</li><li>Client then installs that lib on their desired project</li></ul><p><mark style="color:$danger;">Cross-workspace updates are not possible currently.</mark> </p>                                                                 | Same process as above, but must auth and setup a separate API\_KEY for each workspace.                                                                           |
| Sharing to the Community        | <p>? Cloneable + instructions <br><br><mark style="color:$danger;">Note that shared libs cannot currently be exposed as cloneables, which complicates update processes.</mark> </p>                                                                                                                                                                       | ? Github repo + instructions                                                                                                                                     |

{% hint style="warning" %}
Currently components are not supported for cross-project copy-paste, or in Marketplace Libs.&#x20;
{% endhint %}

[^1]: Verify this- DevLink export is still in beta&#x20;