Just JSON

primo sites are represented by a single JSON file, so duplicating, backing up, and transferring them is as trivial - just copy and paste.

This is what that file looks like

const site = {
id: 'mega bikes',
label: 'Mega Bikes',
pages: [
...,
{
id,
title,
content: [
{
id: '2d73d',
width: 'contained',
columns: [
{
id: 'fke93e',
size: 'w-full',
rows: [
{
type: 'component',
id: 'pe3es4',
symbolID: '39diip',
value: {
raw: {
html: '<h1>{{heading}}</h1>',
css: '',
js: '',
fields: [
{} // Field object
]
},
final: {
html: '<h1>Welcome to Mega Bikes</h1>',
css: '',
js: ''
}
}
},
{
id: '9ekie',
type: 'content',
value: {
html: '<p>We have everything you need, and more</p>'
}
}
]
}
]
}
],
styles: {}, // Style object
wrapper: {}, // Wrapper object
fields: [], // Field objects
symbols: [
{} // Symbol object
]
}
],
styles: {
raw: 'h1 {@apply text-red-100}',
final: 'h1 { --text-opacity: 1;color: #f05252;color: rgba(240, 82, 82, var(--text-opacity));}',
tailwind: `{
theme: {
container: {
center: true
}
},
variants: {}
}`
},
wrapper: {
head: {
raw: '<title>Call us at {{phone}}</title>',
final: '<title>Call us at 382-384-2933</title>'
},
below: {
raw: '',
final: ''
}
},
fields: [
{
id: '83eos3',
key: "phone",
label: "Phone Number",
value: "382-384-2933",
type: "text",
fields: [],
}
],
symbols: [
{
id: '39diip',
value: {
raw: {
css: '',
html: '<h1>{{heading}}</h1>',
js: '',
fields: [
{} // Field object
]
},
final: {
css: '',
html: '<h1>A Heading Goes Here</h1>',
js: '',
}
}
}
]
}

The single-file approach may cause slow load/save times for larger sites, but the structure can be improved on in the future to significantly lower the file's size (for example, by not including compiled values or duplicating symbol code).