Development

Component Editor

You can modify any component on the page by hovering over it and clicking the 'Edit' button in the top left (assuming that the editor has been switched to IDE mode).

0

This will open up a development environment focused on that particular component, where you can edit its code (written in Svelte) and its fields (which integrate the CMS).

The IDE includes an adjustable live preview of your component, with an indicator for screen width and a switch to show the component fixed at window width or contained within the preview width (i.e. mobile view).


Code

Components are built with Svelte, meaning they're neatly separated into three different languages according to their concerns - content structure (HTML), styling (CSS), and interactivity (JS). Components within primo are treated by the compiler as individual Svelte files, so their CSS is encapsulated & their JS is scoped to the component.

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.

CSS

Your component's encapsulated CSS is fed through PostCSS before making it to Svelte, which enables support for nesting and autoprefixing. 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.

JS

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.


Fields

Component Fields allow you to define form fields which 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).