Dollie Editor SDK guide

Manual Installation

Add the editor engine and Core catalog to an existing React application.

This guide creates a local editor with the Core catalog and in-memory state. It is the smallest useful integration: you can add and edit sections, inspect the resulting page definition, and then connect persistence when the editor is working.

Install the packages

npm install @dollie_ai/editor @dollie_ai/editor-catalog

The engine is @dollie_ai/editor. The optional Core catalog is currently published as @dollie_ai/editor-catalog.

Import the styles

Add both stylesheets after Tailwind in your main CSS file:

@import "tailwindcss";
@import "@dollie_ai/editor/styles.css";
@import "@dollie_ai/editor-catalog/styles.css";

Your application remains responsible for its Tailwind setup and theme tokens.

Create a catalog

import { createCatalog } from "@dollie_ai/editor";
import {
  freeCatalog,
  freeSectionDefinitions,
} from "@dollie_ai/editor-catalog";

export const catalog = createCatalog([freeCatalog]);
export const sectionDefinitions = freeSectionDefinitions;

freeCatalog contains the components the renderer may use. freeSectionDefinitions describes the fields the editor and Copilot may change.

Render the editor

import { useState } from "react";
import {
  PageBuilderEditor,
  PageBuilderEditorProvider,
  serializeEditorState,
  usePageBuilderEditor,
  type PageConfig,
} from "@dollie_ai/editor";

import { catalog, sectionDefinitions } from "./catalog";

const initialPage: PageConfig = {
  sections: [{ component: "free-hero-split" }],
};

export function PageEditor() {
  const [definition, setDefinition] = useState(initialPage);
  const [leftPanelTab, setLeftPanelTab] =
    useState<"layers" | "copilot" | "page">("layers");
  const editor = usePageBuilderEditor(definition, setDefinition);

  return (
    <div className="h-screen">
      <PageBuilderEditorProvider
        runtime={{ catalog, sections: sectionDefinitions }}
      >
        <PageBuilderEditor
          editor={editor}
          topBarLeft={<strong>Page editor</strong>}
          topBarRight={null}
          copilotTab={null}
          copilotEnabled={false}
          pageTab={
            <pre className="overflow-auto p-3 text-xs">
              {JSON.stringify(serializeEditorState(editor.state), null, 2)}
            </pre>
          }
          leftPanelTab={leftPanelTab}
          onLeftPanelTabChange={setLeftPanelTab}
        />
      </PageBuilderEditorProvider>
    </div>
  );
}

The usePageBuilderEditor callback receives the current PageConfig. The example keeps that definition in React state; production applications normally save it through their backend.

Render the page outside the editor

Use the same catalog to render saved content:

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

import { catalog } from "./catalog";

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