Build the Post Canvas

Start with the editor runtime and a host-owned catalogue. Posts reuse the same section registration, templates, selection, undo history, and rendering APIs as pages.

Configure the runtime

Supply the optional TipTap control to edit Markdown with rich formatting. Install the TipTap peer dependencies listed by your installed SDK version before importing the @dollie_ai/editor/richtext entry point.

import { PageBuilderEditorProvider } from "@dollie_ai/editor";
import { RichTextFieldControl } from "@dollie_ai/editor/richtext";

// catalog, sections, templates, images and children are supplied by your host.
<PageBuilderEditorProvider
  runtime={{
    catalog,
    sections,
    templates,
    images,
    canvas: { layout: "post" },
    richTextControl: RichTextFieldControl,
  }}
>
  {children}
</PageBuilderEditorProvider>;

Post mode limits the canvas to 960px while respecting smaller viewport presets. This is editor presentation, not a stored layout property or a replacement for your public CSS. Without richTextControl, rich fields fall back to editing their raw Markdown strings.

Define the fields

These are field descriptors inside your registered section definitions:

import type { BuilderField } from "@dollie_ai/editor";

const headerFields = [
  { kind: "text", key: "title", label: "Title", optional: false },
  { kind: "text", key: "excerpt", label: "Excerpt", multiline: true, optional: true },
  { kind: "element", key: "featured_image", label: "Featured image", accepts: ["image"], optional: true },
] satisfies BuilderField[];

const bodyFields = [
  { kind: "text", key: "content", label: "Writing", rich: true, multiline: true, optional: false },
] satisfies BuilderField[];

Render the body through the SDK's RichText component. Its value is Markdown, not HTML or TipTap JSON. Clicking rich content focuses the formatting inspector; plain text fields can be edited inline. The same declared fields are available to AI Fill and Copilot proposals when those features are wired into the host.

The header's featured_image must be an image-capable element slot, not a text field labelled “image URL”. Supply runtime.images for the image library and render the native image reference through the SDK element renderer. Its JSON can retain alt text, fit, mirror and effects. For the Laravel mapper, keep the header keys title, excerpt, and featured_image; the section's component ID is configurable.

Load a layout, then write

Offer a template containing one header and one writing section. Add illustration, image, and other content sections to your catalogue so authors can insert them between writing sections. A template contains layout and default content; it does not publish a post.

When using Laravel PostCanvas, do not save a second header in the body. Keep exactly one header at the start of the editing document. The adapter validates this shape on save.

Put settings in the sidebar

Use the pageData and pageDataSchema returned by PostCanvas::document() with the SDK's schema-driven settings. The Post tab exposes slug, category, comma-separated tags, and SEO overrides. Title, excerpt and featured image remain header fields.

Save the edited pageData alongside serializeEditorState(editor.state) and the loaded revision. Use the revision returned by a successful save for the next request. Preserve local writing when the server reports a conflict.

The standard mapper marks a published slug read-only; the backend also enforces that rule. Unpublish before changing its URL. The host chooses where preview and publishing controls appear, for example in topBarRight or a compact details screen.