Configure the Editor Runtime

PageBuilderEditorProvider supplies the registry and rendering behavior used by the editor workspace.

Minimum runtime

<PageBuilderEditorProvider
  runtime={{
    catalog,
    sections: sectionDefinitions,
  }}
>
  <PageBuilderEditor {...editorProps} />
</PageBuilderEditorProvider>

The two required values are:

• catalog: the components the canvas may render;
• sections: the fields the inspector and Copilot may edit.

Optional runtime features

The runtime can also receive:

Option	Purpose
renderElement	Override how illustration, image, or widget elements render
iconNames	List the icons users may select
renderIcon	Render an allowed icon name
renderBoundary	Wrap rendered sections in a host boundary
bindingSlots	Describe collection binding slots
illustrationFields	Add per-illustration editing fields
illustrationDefaults	Provide per-illustration default props
templates	Offer surface-scoped Page Templates in the built-in picker
canvas	Choose page or fixed-size presentation layout

Add an option only when a catalog component needs it. A small runtime is easier to verify and safer to expose to AI.

Add Page Templates

Catalog packages may carry templates, but the runtime does not automatically expose every template in a composed Catalog. Pass only the starters appropriate for this surface:

<PageBuilderEditorProvider
  runtime={{
    catalog,
    sections,
    templates: [...catalog.templates, ...workspaceTemplates],
  }}
>
  {children}
</PageBuilderEditorProvider>

When the Page is empty, the canvas offers Open template. The same picker can be opened from host chrome through PageBuilderEditorHandle.openTemplatePicker(). See Catalog Templates for creation, storage, packaging, and safe import.

Use a presentation canvas

The presentation layout treats every Section as a fixed-size slide while preserving the normal ordered PageConfig contract:

<PageBuilderEditorProvider
  runtime={{
    catalog,
    sections,
    templates,
    canvas: {
      layout: "presentation",
      slideSize: { width: 1920, height: 1080 },
    },
  }}
>
  {children}
</PageBuilderEditorProvider>

The Editor scales each slide into a letterboxed canvas frame. Reordering, insertion, selection, inline editing, and Element overlays continue to use the same Section APIs. Canvas layout and slide size are not stored in the Page; the host chooses them for the current surface.

The default layout is page. Presentation mode defaults to 1920 × 1080 when slideSize is omitted.

Supply host UI through slots

PageBuilderEditor deliberately leaves product-level actions to the host:

<PageBuilderEditor
  ref={editorRef}
  editor={editor}
  topBarLeft={<PageIdentity />}
  topBarRight={<SaveAndPublishActions />}
  copilotTab={<YourCopilot />}
  pageTab={<PageSettings />}
  leftPanelTab={leftPanelTab}
  onLeftPanelTabChange={setLeftPanelTab}
  capabilities={capabilities}
  onSaveBeforeOverride={saveDraft}
/>

This lets your product own breadcrumbs, save status, publishing controls, page settings, and Copilot UI without forking the editor shell.

The optional ref is a PageBuilderEditorHandle. Call openTemplatePicker() when the host needs an Import template action outside the empty canvas. When a template would replace existing content, onSaveBeforeOverride adds a Save and override choice; rejected or failed saves leave the current Page unchanged.

Set copilotEnabled={false} when the document should not expose a Copilot tab.

For schema-driven page settings, use the SDK's controlled editor:

const [pageData, setPageData] = useState(resolvePageData(document.pageDataSchema, document.pageData));

<PageBuilderEditor
  // ...
  pageData={
    document.pageDataSchema
      ? {
          schema: document.pageDataSchema,
          value: pageData,
          onChange: setPageData,
        }
      : undefined
  }
/>;

The editor renders PageDataEditor automatically. Supply pageTab only when you need a completely custom Page settings surface. Save pageData beside the serialized Page definition; the host still decides how fields map to CMS columns and which server-side rules apply.

Keep registration deterministic

Build the catalog from a known set of sources and packages. Duplicate source ids, prefixes, or final component ids fail during catalog creation.

Use:

npx dollie-editor info --json

to give your coding agent the installed catalog inventory.