Symbols

Symbols are components that you reuse across your site. Whenever you update a Symbol, every instance of it gets updated too.

Creating a new Symbol

Creating and using a Symbol at the same time

  • Create a component, convert it into a symbol

  • When you save the symbol, it will be saved to your Symbol Library and a new instance of it will be left on the page.

Creating a Symbol for later use

  • Click 'Symbol Library'

  • Click 'Create a Symbol'

  • Once it's saved, you'll be able to add it anywhere on any page.

Updating a Symbol

  • Click 'Symbol Library'

  • Click Edit icon on any of the symbols

When you update a symbol, its code gets applied to its instances across your site, but the field data across those instances are preserved (i.e. only their code gets overwritten). A future version of primo may allow you to overwrite code on a component instance.

Copying + Pasting Symbols

You can copy multiple Symbols at once and paste them into another site or send them to another user as a text string and so that they can use them in their own sites. Note that any page/site fields, styles, and Tailwind configurations won't be carried across to the new site, so the Symbols may appear broken in their new destination if they had those dependencies.

Emancipating an Instance

A Symbol's clones used across a site are called Instances. Since an Instance's code is dependant on its Symbol, you'll only be able to edit its data. But if you need to edit it, you can just click 'Emancipate' from the Component Editor to turn it into a single-use component.

Turning an Instance into a Symbol

If you have a new idea for a Symbol, you can use an existing Symbol as a starting point by:

  1. Adding an instance of it to the page

  2. Emancipating it

  3. Converting it into a new Symbol

Using Symbols

Once you've added a few items to your Symbol Library, you can:

  • use it from the CMS to easily create new page layouts

  • use it as a starting point to build entirely new sites

  • keep your components in sync across your whole site

‚Äč