Widgets

Each widget has its own settings (see Widgets) and a layout for the box it sits in, edited under Placement and Colour:

layout	Values
margin_top, margin_bottom	none, small, medium, large; unset leaves the usual 1rem between widgets
align	left, center, right; moves only this widget, overriding the column
hide	any of mobile, tablet, desktop
background, text_color	a theme colour name or CSS colour for the widget's box
inline	true sits the widget beside neighbouring widgets that also have it (two buttons on one line); a run of them shares the first one's space above
tablet, mobile	{ margin_top, margin_bottom, align, inline } that replace the values above at that screen size; inline: false stacks a widget that is inline on desktop

Custom code

Sections, columns and widgets each take a custom object, edited under Code (or "Anchor and code" on a section):

custom	Does
classes	extra classes on the element, for styling from the theme's custom CSS
attributes	extra attributes, one name=value per line; names may use letters, digits, -, _, : and ., and class and style are ignored here
style	an inline style added after the renderer's own
html	HTML added inside the element, after its content
script	JavaScript run in the page with el bound to the element

HTML, scripts and attributes whose names start with on are served exactly as written. A document that contains any of them, or a Custom code widget, can only be saved by someone with the manage site permission, and that stays true for later saves of the same document. Classes and styles can be saved by anyone who can edit the page. Rich text in Text widgets is cleaned against an allowlist when it is saved.

Editing from the live site

Signed-in editors see a small button in the bottom-left corner of public pages that opens the actions fitting the page: edit the page or entry, its template, the header and footer, the theme. Visitors never see it, and the page HTML carries nothing personal, so pages stay cacheable. Closing it hides it for the rest of the browser session.

The document

Builders who keep sites as files see the same tree as JSON:

{
  "version": 1,
  "sections": [{
    "id": "hero",
    "settings": { "padding": "large", "min_height": "80vh", "text_color": "background" },
    "columns": [{
      "id": "c1",
      "width": 8,
      "settings": { "width_tablet": 12, "mobile": { "align": "center" } },
      "widgets": [
        { "id": "w1", "kind": "heading", "settings": { "text": "Oak, made to ==measure==", "level": 1 } },
        { "id": "w2", "kind": "button", "settings": { "label": "Get a quote", "href": "/contact" }, "layout": { "inline": true } }
      ]
    }]
  }]
}