Inside the page builder

Open Pages in the studio and choose Home. There is a palette of blocks and the layers of the page, the page itself, and the settings of whatever is selected. It looks like a widget. It is a Model.

Headless first

foldkit-builder holds the editor’s state and draws nothing: the page, the selection, which panel a narrow screen shows, and the width the page is previewed at. Its Messages are what a person can do (select a block, insert one, move it, change a setting, undo), and its update answers them.

foldkit-mixins-builder draws it. Its views name their parts, so this demo styles every part to match the studio without forking a line of them.

Every edit is an Operation

The Builder does not change the page itself. Each edit becomes an Operation, and foldkit-composition decides whether it may happen. Drop a Heading where only sections may go, and the edit is refused and the page is unchanged. The keyboard goes the same way as the pointer: Alt with an arrow moves a layer, Ctrl+D duplicates it, Delete removes it.

The page’s history is kept with foldkit-primitives, so Ctrl+Z steps back through the edits and Ctrl+Shift+Z forward again. Copying a block copies everything inside it, and pasting gives each copy new ids, so a page never holds two blocks with one id.

Settings come from the block

The settings panel is not written block by block. It is a form, built with foldkit-form from the block’s props Schema: a text prop becomes a text field, a choice of a few values becomes a select, and the Schema’s title and description become the label and the hint. Each change that reads as a valid value becomes one Operation. Give a block another prop, and its settings follow.

A page is one field of a form

Saving is not the Builder’s job. In the studio the Builder is one field of the page’s form, beside its title and its address, and foldkit-cms saves that form as a draft while you work. So a page gets what a post gets: saving as you type, publishing, revisions and restoring.

What you see is drawn by the site

The canvas is drawn by the site’s own views, so what an author arranges is what a reader will see. Blocks that read data, like the latest posts, read it on the canvas as they do on the site. Previewing at a phone’s width shows the layout a phone gets: the page is its own container, so its layouts answer to its width, not the window’s.

And an agent can build a page too. It sends the same Operations a person’s drag sends, and they are checked the same way.