Page Builder

The Builder is where content editors fill in page content. While the Editor defines what a page can contain, the Builder is where actual text, images, links, and other data are entered for each page.

Overview

The workflow is straightforward:

1. Select a page from the page list
2. Manage which sections the page contains
3. Click a section to open its content editor and fill in element values

Section Management

Once a page is selected, you can manage its sections:

Adding Sections

Use the dropdown selector to pick from available published sections and add them to the page. Sections are added to the page's section list and become available for content editing.

Removing Sections

Remove a section from the page. This deletes the section and any content entered for it on this page.

Reordering Sections

Drag-and-drop sections to change their display order on the page. The order here determines the order in which sections are rendered on the frontend via BreasePage.

Publish/Unpublish Sections

Individual sections on a page can be published or unpublished. Unpublished sections are not included in the API response when the page is fetched, so they won't render on the frontend.

Show/Hide Sections

Toggle section visibility without removing the section. Hidden sections retain their content but are excluded from the API response — useful for temporarily hiding a section without losing its data.

Global Sections

Global sections are created in the Editor (not the Builder). When adding sections to a page, global sections appear alongside regular sections in the section picker. Once added, you can edit a global section's content directly in the Builder — but unlike regular sections, changes to a global section's content apply to every page that includes it.

This is useful for content blocks that should be identical everywhere, such as a CTA banner, an announcement bar, or a newsletter signup form. See Editor — Global Sections for how to create them.

Content Editing

Click a section (from the kiosk or the section list) to open the content editor drawer. The drawer displays all elements defined in that section's schema, each rendering a type-specific input:

• String: single-line text field
• Long Text: multi-line textarea
• Rich Text: CKEditor rich text editor with formatting toolbar
• Integer / Decimal: numeric input fields
• Boolean: toggle switch
• DateTime: date and time picker
• Media: media picker for selecting uploaded files (images, video, etc.)
• Link: link picker with support for internal pages, external URLs, media files, and collection entries
• Collection: selector for linking to collection entries
• Option: dropdown or checkbox group based on the defined option values
• Reference: reference to other entities
• JSON: raw JSON editor
• Location: location/coordinates input

Fill in each field and save. Values are stored per section, per page, per locale.

Live Preview

When a site has a previewDomain configured in its settings, the Builder displays a live iframe preview alongside the content editor.

How It Works

• The preview loads your frontend application in an iframe pointed at the preview domain
• As you edit content in the Builder, changes are streamed to the iframe in real time via the PostMessage protocol
• The frontend receives content updates and re-renders sections without a page reload

Preview Toolbar

Inside the preview iframe, each section displays a toolbar with an Edit button. Clicking "Edit" jumps you back to the Builder's content editor drawer for that specific section, creating a seamless back-and-forth editing experience.

Locale Switching

The Builder includes a locale dropdown that controls which locale's content you are editing.

• Switching locales reloads the content editor with that locale's data
• Saving content applies only to the currently selected locale
• Only localized elements show different values per locale. Elements marked as non-localized in the Editor share a single value across all locales (e.g., an image field that should display the same image regardless of language).

This allows content editors to manage translations directly within the Builder without switching to a separate tool.