Pages

The Pages screen lists the site’s files: the pages first, by address, then a group for each kind of file the site has. A page is called by the name its file gives it, or by the file itself when it gives none. Pick a page to see it as the branch you are working on has it, in a preview and as code. Pick any other file to see its code.

Branches and going live

A change you or your agent make to your site’s code never goes straight to visitors. It waits on a branch, and the live site changes only when that branch is merged.

The picker in the banner at the top of the screen says which branch you are looking at. Live site (main) is what visitors see right now. The changes you make on this screen go on a branch called draft, and a coding agent usually works on a branch of its own, which you can pick here as well. The dashboard remembers your pick for each site.

When you are looking at the live site and make a change, such as restoring an old version, the screen starts draft from the live site for you and switches to it.

The banner says how many changes on the branch are not live yet. Beside it:

• Preview site opens the whole site as the branch has it, at the site’s preview address, such as preview--your-name.vizitka.page.
• Review opens the branch on Branches, with every change it holds.
• Merge and go live puts the branch live. A branch that changes your tables takes you to its screen on Branches instead, to see what merging does to them and merge there.
• Update takes its place when something else has gone live since the branch started, such as another branch being merged. Update the branch, check the preview again, and then merge.

A merge takes the whole branch at once: every page, layout, component, table, stylesheet, language file, JavaScript file and import map change on it. There is no button that puts one page live on its own, so what you previewed together goes live together. Once merged, the branch is gone, and your next change starts a fresh draft.

A change that goes through can still come with a warning beside its confirmation, marked with a triangle: a sentence that names a file and something in it worth a look, such as notes left for a block that is no longer there. A warning stops nothing, so the change is on the branch, or the merge is live. Pass the sentence on to your coding agent.

Preview a page

Preview opens the selected page in a new tab with a private preview link, as the branch has it. Open live site opens the public version when the page has one. A visitor cannot use the preview unless they have its signed link. A preview runs your site’s JavaScript as the branch has it, and when a page cannot be drawn the preview says only that, so ask your coding agent what broke.

Previews open at the site’s preview address, never at its own address or a domain you connected. A form you send in a preview of a branch keeps its entry with that branch: the preview shows it, but it never reaches your tables, nobody is told about it and no workflow runs. Those entries go when the branch does. A preview of the live site keeps nothing a form sends.

The page is also shown on a preview card on the screen itself. The two buttons at the top of the card lay the page out for a laptop or for a phone, at the size of an iPhone 17’s screen. The one you pick stays picked as you go from page to page.

Pick a block, the button before those two, lets you point at a part of the page. While it is on, the preview outlines the block under your pointer, and a click picks that block instead of following a link. A panel opens under the preview with the block’s name, the file and lines it is written in, the author’s note, what the block does, the named fields it reads, any notes kept on it with what is still to do, and the blocks inside it, where one with a name opens in the same panel. A click that lands in no block shows the whole file instead. Nothing in the panel rebuilds a block, so what it names is what to tell your coding agent when you want that part rebuilt. What you can change there yourself is a field’s value and the block’s notes, where the block stands, and the words, link, picture and classes of what you clicked.

Switch the card from Preview to Code to read the page’s file, as the branch you picked has it. The side you pick stays picked as you go from page to page too.

Each page’s pill compares the branch’s copy with the live site: Live when they are the same, Draft when the branch has changed it, and Not published when the page has never been live. On a changed page, the discard control (the curved arrow beside Preview) puts the live version back on the branch, or removes the page from the branch if it has never been live.

Set a block’s fields and notes

A named field is a value your agent gave a name to, so that it can change without anybody touching the markup around it: a heading’s words, a price, a picture, a list of opening hours. Under Named fields, the panel of a picked block lists the ones that block reads, and each has a control to suit its kind:

• Text, a number and a link each have a box and a Save button. A link’s box offers your site’s own pages as you type and takes any other address too.
• An on-off value is a switch, and a choice is a button for each option. One click sets it.
• A picture has Choose picture, which opens your Disk to pick a file or upload one, and the pick is saved at once. Remove picture, there while the field holds one, takes it away just as quickly, and the page then shows no picture in its place.
• A list has a row of boxes for each item, arrows that move a row up or down, a bin that removes it, Add a row, and one Save for the whole list. A picture in a list is chosen or removed in its row, and goes with that Save. Saving with no rows left empties the list, and the panel says so before you save. A list emptied here keeps its kind of row, so Add a row fills it again later.

A value worked out by code is listed with no control. So is a list the panel cannot set, with a line that says why: a very long one, for example, or an empty one that says nothing of what an item holds.

A block of a layout or a component can read a field that belongs to the page. Where the page you are previewing has that field, the control sets it for that page, and no other page changes.

Under Notes is a box for your own notes on the block, with a Save button. They are kept beside the file, where your agent can read them before it changes the block, and no visitor is ever sent them. A line written as - [ ] Ask about the photo is listed under Still to do until its brackets hold an x. Saving the box empty takes the block’s notes away.

Each save is one more change on the branch you are looking at, like every other change on this screen: from the live site it starts draft and moves you there, the preview is drawn again, and visitors see nothing new until you merge. A value the site’s files will not take is refused, and the panel says why beside the field, with what you typed still in the box. A save is refused too when the file changed after the panel opened, because your agent pushed in the meantime for example, and the panel then shows the block as it now stands. A warning about a save that was made is said at the top of the panel.

The panel only reads, and says why, in three cases: while you are looking at an earlier version out of a page’s history, while you are on the live site and the site already has a draft (go to the draft to set a field there), and on a site you cannot change, such as one frozen under its plan.

Move, copy or remove a block

Under a picked block’s name are four buttons. Move up and Move down move it one place among the blocks beside it in its file. Duplicate puts a copy right after it and opens the copy in the panel. Remove asks first, since the block’s notes go with it, and the panel then shows the whole file.

A move passes the next block along, so the button is greyed out, with a hint that says why, where there is no block to pass or where that block has no id to be named by. Give it an id in the file, or ask your coding agent to.

Each of these is one change on the branch, made and refused the way a field’s save is. A move or a copy can be undone by restoring the file’s version before it. A removal takes the block’s notes with it, and restoring the file brings the block back without them. In the three cases where the panel only reads, the buttons aren’t there.

Change what you clicked

With Pick a block on, a click also reads the one element it landed on, and what you can change in that element is listed under the block’s panel.

Words in this element has a box for each run of words written in the file itself, with a Save words button. Words that come from a named field, a table’s row or code are not the file’s own, so they have no box here: a field’s are set under Named fields. What you type is kept as plain words, so a tag typed there shows on the page as you typed it, and a box cannot be saved empty.

Link in this element is there when the element you clicked is itself a link whose address is written in the file. A click on something inside a link, such as a picture or words in bold, reads that inner element, so click the link’s own words. The box offers your site’s own pages as you type, or type another address, and Save link sets it. Where the address is worked out by code there is a line that says so and no box: set the field it comes from, or ask your coding agent.

Picture in this element is there when you clicked a picture whose address is written in the file. It shows the picture and its name when it is a file on your Disk, or its address when it is not. Choose picture opens your Disk to pick a file or upload one, and the pick is saved at once. A picture can be swapped here, not taken away. One whose address is worked out by code, or which is written in several sizes, gets a line that says so instead.

Classes of this element lists the classes written on it, each with a cross that takes it off, and a box with Add class that adds one, a single name at a time. Where the classes are worked out by code, a line says so and nothing can be changed.

A save here is a change like a field’s. It goes on the branch you are looking at, from the live site it starts draft and moves you there, and the preview is drawn again. It is refused when the file changed after you clicked: the preview is drawn again as the file now stands, and what you typed stays in its box. In the three cases where the panel only reads, all of this is shown and nothing is set.

The files of a site

Your site is a set of files, written in vzk, and the sidebar lists them by kind. Table pages are the pages a table’s rows are shown through. Layouts wrap the pages, and Components are the pieces pages share. Languages holds a file’s words in another language, Site the fields every file reads and the stylesheet, and Notes the notes kept beside a file. The JavaScript group is described below.

Selecting a page shows it on the preview card, with its file behind the Code switch. Selecting any other file shows its code. Every card has the state pill, the history, and the discard and Restore this version controls.

Add page, beside the screen’s title, asks for a name and the path visitors will see, and puts a new page on the branch, made from a starter. It is not live until you merge. Besides that and what a picked block’s panel changes, nothing here edits code. Ask a connected coding agent to fill the page in, to rename or move a page, to fix the links to a page it moved, and for any other change to a file.

Table pages

Under the list there may be a Table pages group. These are the pages your rows are shown through, one per table, and they answer only underneath their own address: the page for a blog at /blog is what serves /blog/hello, while /blog itself is the ordinary page above that lists the posts.

Selecting one previews it with one of that table’s rows, because there is nothing to show without a row: a row your visitors can already open, the newest published post on a blog. Until there is one the card shows the page’s code in place of a preview. It goes live with a merge like any other page, and that matters: until a table’s page is live, every row under it answers 404, however many of the rows themselves you have published.

Your site’s JavaScript

A site can have JavaScript of its own. When yours does, the sidebar gains a JavaScript group under the pages: one row per file, named the way the code imports it, and an Import map row once the site pins packages from the web.

Selecting one shows its code on the card a page’s code is shown on, with the state pill, the history, and the discard and Restore this version controls a page has. Nothing here edits code. Ask your coding agent for a change.

Two names carry a meaning of their own. A file called application is imported on every page, and a file under controllers/ is fetched only where your markup asks for it by name. Every other file runs when one of those imports it, and each card says which of the three you are looking at. The import map’s card names every host it fetches from, because a pinned package is somebody else’s server running code on your site.

Your own code runs on every address your site has: its your-name.vizitka.page address and a domain you connected.

Use history

The state badge on a file’s card opens its history: the changes made to it on the branch you are looking at, newest first, with who made each. Select one to read it, and on a page to see it in the preview card, then choose Restore this version. Restoring puts that version on the branch as one more change. Visitors keep seeing the live page until you merge, so you can inspect it first.