---
title: Pages
description: Preview your pages on a branch, merge to put changes live, and restore earlier versions.
sidebar:
  order: 3
---

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](/dashboard/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](/dashboard/branches/#tables) 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-and-publish}

**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](#set-a-blocks-fields-and-notes),
[where the block stands](#move-copy-or-remove-a-block), and
[the words, link, picture and classes of what you clicked](#change-words-and-a-link).

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 {#set-a-blocks-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](#preview-and-publish) 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](/dashboard/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](#branches-and-going-live) 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 {#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](#use-history) 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 {#change-words-and-a-link}

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](/dashboard/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](#set-a-blocks-fields-and-notes) where the panel
only reads, all of this is shown and nothing is set.

## The files of a site {#a-site-written-in-vzk}

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](#preview-and-publish) 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.