Dollie Editor SDK
Playground

Dollie Editor SDK guide

Set Up with a Coding Agent

Give your coding agent the official Dollie Editor skill and let it adapt the integration to your application

The recommended way to add Dollie Editor is to work with a coding agent that can inspect and edit your repository.

The official skill gives the agent the product vocabulary, current contracts, required checks, and links to the documentation installed with the package.

Copy the setup prompt

Paste this into Codex, Claude Code, Cursor, or another coding agent with access to your project:

Help me add Dollie Editor to this application.

First install and load the official Dollie Editor skills from DollieAI/editor:

    npx skills add DollieAI/editor

Inspect this repository before changing anything. Identify the package manager,
React framework, styling entry point, existing shadcn configuration, backend,
and persistence model.

Ask me to confirm the integration path: Next.js, TanStack Start, or Laravel
with React and Inertia. Then propose the smallest working setup using
@dollie_ai/editor and the Core catalog from @dollie_ai/editor-catalog.

Use only current package APIs. Preserve existing application conventions and
do not replace my storage, authorization, tenancy, or design system.

Finish by typechecking the application and verifying that:
- the editor renders;
- the Core catalog is available;
- one application-owned React component is registered;
- the current PageConfig validates;
- the published renderer uses the same catalog.

Explain what you changed and which host decisions remain.

What the agent should do

A good setup session has four stages.

Inspect

The agent should identify:

  • npm, pnpm, Yarn, or Bun;
  • Next.js, TanStack Start, Laravel/Inertia, Vite, or another React host;
  • the actual Tailwind stylesheet loaded by the editor route;
  • components.json and its aliases, primitive base, and icon library;
  • where pages and authenticated routes live;
  • how the application stores tenant-owned content.

It should not guess paths or replace existing application architecture.

Confirm

The agent should confirm the supported integration path and the first page you want to edit.

For an existing SaaS, choose a real but low-risk page type—for example a course sales page or tenant landing page—rather than trying to migrate the whole website at once.

Install and wire

The agent installs:

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

It then:

  • imports the editor and Core catalog styles;
  • composes the Catalog;
  • mounts the editor provider and shell;
  • starts with an in-memory or host-backed document;
  • registers one component owned by the application;
  • keeps persistence and authorization decisions in the host.

Verify

The session is not complete when the editor merely appears.

The agent should prove:

  1. the application typechecks;
  2. a zero-props Section renders its designed default;
  3. the Section appears in the library;
  4. its fields edit the live canvas;
  5. the resulting Page validates;
  6. the same Page renders outside the editor.

If a Copilot is included, its proposal must pass validation before the user can apply it.

Manual instructions remain available

The agent-led path does not hide the integration. It performs the same operations documented in:

Use those pages to review the result or complete the setup without a coding agent.