Dollie Editor SDK guide

Build a Presentation Editor

Use the same Page and Section contracts for fixed-size slide decks.

Dollie Editor can compose a slide deck without introducing a second document model. Each slide is a Section in an ordered PageConfig; the runtime changes how the canvas presents those Sections.

Current package availability

The workspace includes @dollie_ai/editor-catalog-slides as the shared slide Catalog used by the Dollie website and prototype. It is currently a private workspace package, not a public npm install. Applications inside the workspace can import it directly; external Integrators can use the same runtime contract with their own slide Catalog until the package is published.

Compose the slide Catalog

import { createCatalog } from "@dollie_ai/editor";
import {
  slidesCatalog,
  slidesSectionDefinitions,
  slidesTemplates,
} from "@dollie_ai/editor-catalog-slides";

const catalog = createCatalog([slidesCatalog]);

slidesCatalog is a normal CatalogPackage. It carries the slide components, generated field definitions, AI guidance, and two structural starters: a pitch deck and a proposal deck.

Configure the presentation canvas

<PageBuilderEditorProvider
  runtime={{
    catalog,
    sections: slidesSectionDefinitions,
    templates: slidesTemplates,
    canvas: {
      layout: "presentation",
      slideSize: { width: 1920, height: 1080 },
    },
  }}
>
  <PageBuilderEditor {...editorProps} />
</PageBuilderEditorProvider>

The canvas renders each Section at its full design-space size, then scales it into a letterboxed frame. Selection, reordering, insertion, inline editing, Fields, Elements, undo, and Copilot proposals continue to use the normal editor contracts.

canvas is runtime presentation state. It is not written to the PageConfig, so the same document remains portable and the host can decide which route renders it as a deck.

Keep templates surface-scoped

Pass slidesTemplates only to a deck editor. A host that also serves marketing Pages can compose both Catalogs internally while keeping their template libraries separate:

const templatesBySurface = {
  page: pageCatalog.templates,
  deck: slidesCatalog.templates,
};

The template picker uses the active runtime Catalog to preview and import each deck. The pitch and proposal templates are structural starters with replaceable copy; they do not claim customer facts or proof.

Render and present the deck

The editor canvas is not the audience-facing presentation route. Serialize the editor state, then render the same Page through SectionRenderer inside a host-owned presentation shell:

<ElementRendererProvider catalog={catalog}>
  <SectionRenderer catalog={catalog} definition={deck} />
</ElementRendererProvider>

The host owns full-screen navigation, keyboard controls, PDF export, privacy, authorization, and storage. A private proposal can remain excluded from indexing without changing the editor contract.

Slide Catalog exports

Export	Purpose
`slidesCatalog`	Complete discoverable `CatalogPackage`
`slidesSource`	Registered slide Sections and Elements
`slidesSectionDefinitions`	Fields used by the inspector, validation, and Copilot
`slidesTemplates`	Pitch and proposal Page Templates
`slidesFieldOverrides`	Explicit authoring overrides layered over generated Fields
`SlideStage`	Fixed-size slide design-space wrapper for Catalog authors
`SlideChrome`	Shared page label and brand-mark chrome for slide components
`formatText` and `RichText`	Lightweight emphasis rendering used by slide copy