Dollie Editor SDK
Playground

Dollie Editor SDK guide

Next.js

Add Dollie Editor to a Next.js application.

In Next.js, keep the interactive editor in a Client Component and let your application load, authorize, and persist page definitions on the server.

Install and configure

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

Import the package styles in the global stylesheet:

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

The current packages publish TypeScript source. Add them to transpilePackages:

// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  transpilePackages: [
    "@dollie_ai/editor",
    "@dollie_ai/editor-catalog",
  ],
};

export default nextConfig;

Create the editor component

Start the component that contains PageBuilderEditor with:

"use client";

Then follow Manual Installation to create the catalog and editor runtime.

Keep server decisions on the server

Use your existing Next.js conventions to:

  • check whether the current user may edit the page;
  • load the correct tenant and page;
  • validate the submitted PageConfig;
  • prevent stale writes with a revision or updated-at value;
  • publish only after your product's review rules pass.

Do not place secrets, database clients, or unrestricted dynamic data in the client-side catalog.

A typical application separates editing and rendering:

app/
├── dashboard/pages/[pageId]/edit/page.tsx
├── api/pages/[pageId]/route.ts
└── [slug]/page.tsx

The edit route mounts the client-side editor. The API route persists structured page data. The public route renders the saved definition with SectionRenderer.

Next steps