Development

Primo is a new approach to web development in that, instead of editing text files in a file directory, you edit code within a focused context - be that a site, a page, or a component. The goal of this strategy is that developers only ever see the code which they're actively concerned with.

Component Editor

Components allow you to write complex UI elements which you can use across any and all of your Primo sites. Since Primo components are written in Svelte, they're capable of powerful interactivity and functionality (Primo itself is built with Svelte).

Component Editor

Code

HTML

From the HTML tab, you can integrate the fields created under the Fields tab with the component so that content entered in the CMS can be compiled into static HTML.

To integrate a field, reference its Field ID as a variable from your HTML and JS and use Svelte's templating syntax to connect it.

  • Templating
  • Events
  • Reactivity

HTML component code

CSS

Your component's encapsulated CSS is fed through PostCSS before making it to Svelte, which enables support for nesting and auto prefixing. Note that any styles in your Site CSS & Page CSS are respectively added above your component's CSS, so that your component looks in the preview as it will on the page.

  • Encapsulation
  • Nesting
  • Autoprefixing

JavaScript

Just like in your component's HTML, you can access and modify field values as variables from your JS based on their Field ID. To import JS libraries, write absolute import statements like you would in a bundler (i.e. import lodash from 'lodash') - primo imports them in the background from skypack.dev. All of Svelte's superpowers are available from your JS - including transitions, stores, reactive statements, and more.

  • Libraries
  • Transitions
  • Reactivity

Fields

Component Fields allow you to define form fields that appear on the CMS side of primo. When the site is published, the value of those fields is compiled into static HTML.

At the moment, you can define 7 basic input types (text, image, Markdown, number, switch, URL, link), 1 informational type, and 2 composite types (group & repeater).

  • Text
  • Image - accessible with {image.url} and {image.alt}
  • Markdown - accessible with {@html description}
  • Number
  • Switch (true/false)
  • URL
  • Link - accessible with {link.url} and {link.label}
  • Info (enables writing instructions to CMS users)
  • Group (used to group fields together)
  • Repeater (used for content lists)

HTML

Component Libraries

This is where you manage the components for your site. You can create new ones, upload existing ones that you've downloaded from another site, and add ready-to-use components from the Primo and Community Libraries.

Site Library

The components contained within your site

HTML

Primo Library

Theme-able components designed & built by the Primo team

HTML

Community Library

An assortment of components submitted by the community

HTML

Page & Site

HTML

Head tag

HTML added to the Page will be added below any HTML added to the Site. HTML added to the Site will appear on every page on the site.

Code placed here will appear within the head tag of the page. This is typically where you'd put meta and link tags. You can also use variables which correspond to the page/site Fields.

Before closing body tag

Code placed here will appear before the closing body tag. Variables can also be used here.

HTML

CSS

CSS added to the Page will be added below any CSS added to the Site. CSS added to the Site will appear on every page on the site. Both will cascade down to the Components on the page.

CSS

Fields

Fields added to the Page are accessible from the Page HTML and any components on the page. Fields added to the Site are accessible from the Page & Site HTML, as well as any components on the site.

Site fields can be overwritten by Page fields by using the same field ID, and Component fields can overwrite Page fields by using the same ID.

Fields