# 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;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sygnal.gitbook.io/sygnal-webflow-components/technical-notes.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.