Editor and sections

The website editor is a full-page live environment: the page you're viewing IS the editor. Click any text to edit in place, click an image to swap it from your media library, drag section headers to reorder. Settings slide in from the right when you select a section or element; everything else stays out of your way.

This page covers the section types you can stack on a page, the canvas layout engine for more custom arrangements, and the responsive preview modes.

Section types

Sections are full-width blocks stacked vertically down a page. Every section type has a settings panel on the right exposing the fields that shape it.

Adding a section

1. Hover between any two sections → + Add section button appears.

2. Pick a category, then a specific type, or start from a template (70+ pre-built starting points).

3. The new section lands empty; click any placeholder text to fill it in.

Reordering / duplicating / deleting

Hover over a section header to reveal the toolbar: drag handle (left), duplicate, delete. Drag up or down to reorder. Duplicate is handy for repeating a pattern (e.g. three pricing tiers built from one template).

Canvas: pixel-perfect layouts

Canvas sections are a 24-column grid with row-height snapping, so you can drop elements anywhere on a page without being locked into the left-to-right flow of the structured sections. Use them for:

• A landing-page hero that overlaps text and images in a specific way

• A feature matrix with icons in fixed columns

• A contact section with a map on one side and a form on the other at asymmetric widths

Canvas elements

Inside a canvas section you drop elements rather than sub-sections. The palette:

• Heading, text, image, video, button, divider, spacer

• Nav, accordion, list, card, counter (stat), rating

• Code-block, form (iframe), product-card (from catalogue)

Each element carries per-breakpoint layout coordinates (desktop / tablet / mobile). Dragging an element on desktop doesn't change its tablet or mobile position. You switch breakpoint with the icons at the top and arrange each one independently.

Grid and snapping

• 24 columns across the page (approximates Bootstrap's 12-col grid but at half the granularity).

• Row height is configurable per canvas section (default 80px on desktop, 60px on tablet, 40px on mobile).

• Snap-to-grid is on by default; hold Shift while dragging to go off-grid.

• Z-index is controlled per element, useful when you want text to overlap an image.

Responsive preview

The toolbar at the top of the editor has three icons: desktop / tablet / mobile. Clicking each one resizes the viewport to a representative width (1280 / 768 / 390) and renders the page exactly as a visitor on that device would see it. You can edit in any breakpoint and the change applies to that breakpoint only (for canvas elements) or to all (for structured sections, which use standard responsive CSS).

The published site auto-detects the visitor's viewport using a single media-query breakpoint (768px by default) and serves the appropriate layout.

Save and publish

• Auto-save runs on a 1.5-second debounce after each change. Changes land on the draft copy, never the live page.

• Preview opens the draft at /websites/pages/{page-id}/preview. The URL is tenant-gated so visitors can't stumble on it.

• Publish promotes the draft to live. Previous versions stay in page_revisions (capped at 50 per page by the nightly prune command).

Settings panel

Selecting any section or element opens its Settings panel on the right. The panel is grouped into tabs:

• Content: the text / image / link-url fields that define what's shown.

• Style: colours, spacing, alignment, typography overrides.

• Layout (canvas elements only): per-breakpoint x/y/w/h/z.

• Animation: optional fade-in / slide / scale on scroll.

Changes apply live as you edit. Use Undo (Cmd-Z / Ctrl-Z) to revert; the editor keeps the last 50 operations per session.

Keyboard shortcuts