Using the Component Library

The block library stores reusable starting points for sites on your server. Create a block there when you want to copy it into multiple sites. A block created inside a site stays in that site unless you save a copy to the library.

Watch the workflow

Browse and edit reusable library blocks

Watch the workflow in Primo.

Download video · Download captions

Read the walkthrough

Browse groups in your shared block library.
Open a library block to inspect its code.
Switch to the content fields that power the block.
Close the block and return to the library.

How library blocks work

The server’s block library holds reusable Svelte code, field definitions, and default content. You can copy a library block into any site on that server. Blocks created inside a site’s page type editor remain site-specific unless you save a copy to the library.

Adding a library block to a site creates an independent site block. Updating the library original does not update existing site copies. Editing a site block updates the sections using that block within the site after you publish.

Create and organize library blocks

You need developer access to the server dashboard.

Open the library

Open Library from the dashboard. Select a block group, or create a group for related blocks such as Navigation, Content, or Forms. You choose these group names.

Create a block

Choose Create Block, give it a descriptive name, and write its Svelte markup, script, and styles.

Add fields and defaults

Add editable fields in the Content tab. Set default content so you can preview the block before placing it on a page. Use supported field types and handle empty images, links, and repeaters in your code.

Save and verify

Save the block and reopen it to check its code, field definitions, and default content. Use its menu to rename, move, download, or delete it.

Deleting a library group removes the library blocks inside it. Move blocks you want to keep before deleting the group. Existing independent copies in sites are separate records.

Use a library block in a site

Open the page type

Open your site, choose Pages → Manage page types, and open the target type.

Add the block

In the Blocks tab, add a block from the library. Primo copies its code, fields, and defaults into the site.

Choose its placement

Enable the block in the available-block list if editors should insert it into page bodies. Add shared navigation and footers to the template’s header or footer slot instead.

Check a page

Add a section using the block and edit its content. Verify that section content is independent of the block’s defaults and of other sections.

Update reusable code

Edit the library block to improve the starting point for future copies. To update a block already in a site, edit that site’s block directly and test the pages that use it. Repeat the update for other site copies as needed, then publish each affected site. Use Git with a CLI workspace to review and retain code history. The library does not provide a built-in block-version comparison and rollback interface.

Import and export blocks

Use a block’s Download action to export it as a .json file. Use Import in the library or page type’s block panel to select a compatible exported block. Review its code, fields, and preview before using it. Keep site snapshots or Git commits before changing field keys or types. A downloaded block is a reusable template; it is not a full backup of page content or the server’s users and settings.

Use the library in files

Workspace library blocks live under a group folder:

library/
├── groups.yaml
└── shared/
    └── footer/
        ├── config.yaml
        ├── component.svelte
        ├── fields.yaml
        └── content.yaml

To use one in a file-authored site, copy the block folder into sites/my-site/blocks/, omit copied _id values, and reference its folder name from the page type’s layout or available blocks. The site copy remains independent. Use primo library pull and primo library push to sync the shared library with a hosted server.

Marketplace

Open the Marketplace to browse starter designs. Browse starter sites and blocks, inspect a preview, and copy useful blocks into your library. Imported starters and blocks are independent copies; marketplace changes do not automatically update your sites.

Getting Started

Building Sites

CLI

Collaboration

Content Management

Dashboard

Reference

Using the Component Library

Watch the workflow

Browse and edit reusable library blocks

How library blocks work

Create and organize library blocks

Use a library block in a site

Update reusable code

Import and export blocks

Use the library in files

Marketplace

Next steps

Writing blocks

Block library

​Watch the workflow

​Browse and edit reusable library blocks

​How library blocks work

​Create and organize library blocks

​Use a library block in a site

​Update reusable code

​Import and export blocks

​Use the library in files

​Marketplace

​Next steps

Writing blocks

Block library

Watch the workflow

Browse and edit reusable library blocks

How library blocks work

Create and organize library blocks

Use a library block in a site

Update reusable code

Import and export blocks

Use the library in files

Marketplace

Next steps