Render Published Pages

The editor and published page share one catalog. That is what keeps a stored component id tied to the React component your application owns.

Render a definition

import {
  SectionRenderer,
  type PageConfig,
} from "@dollie_ai/editor";

export function PublishedPage({
  definition,
}: {
  definition: PageConfig;
}) {
  return (
    <SectionRenderer
      catalog={catalog}
      definition={definition}
    />
  );
}

SectionRenderer also applies the portable Section design controls stored in the definition: dark theme, border, bottom divider, and additional wrapper classes. Pages without design controls keep their existing component markup without an extra wrapper.

Render trusted content

Before a definition reaches the renderer:

1. load it inside the correct tenant scope;
2. choose the draft or published revision intentionally;
3. validate its component ids and structured props;
4. resolve permitted dynamic bindings;
5. provide the same catalog version expected by the stored page.

Do not treat arbitrary JSON from a browser or AI model as a published page.

Keep editor state out of storage

The editor assigns temporary ids used for selection and history. Save:

serializeEditorState(editor.state)

That returns the portable PageConfig wire format.

Handle missing components deliberately

A saved page can outlive a renamed or removed catalog component. Treat component ids as a compatibility contract:

• prefer additive catalog changes;
• migrate stored pages before removing an id;
• version breaking wire-format changes;
• test important published pages during catalog upgrades.

The rendering surface should fail safely according to your product's error-handling policy.

Separate drafts from published content

The SDK does not impose a workflow. Your host may keep:

• one current document;
• a draft plus a published snapshot;
• a revision history with restore;
• an approval workflow before publish.

Make the choice explicit in your backend. The editor only returns structured content.