payload-puck

Start with your existing Payload app.

These files show the integration points. Follow the installation guide for peers and the full documentation for the remaining application setup.

import { buildConfig } from 'payload'
import { createPuckPlugin } from '@delmaredigital/payload-puck/plugin'

export default buildConfig({
  plugins: [createPuckPlugin({ pagesCollection: 'pages' })],
})

'use client'
import type { ReactNode } from 'react'
import { PuckConfigProvider } from '@delmaredigital/payload-puck/client'
import { editorConfig } from '@delmaredigital/payload-puck/config/editor'

export function EditorProvider({ children }: { children: ReactNode }) {
  return <PuckConfigProvider config={editorConfig}>{children}</PuckConfigProvider>
}

import { PageRenderer } from '@delmaredigital/payload-puck/render'
import { baseConfig } from '@delmaredigital/payload-puck/config'

// After loading a published page from your Pages collection:
<PageRenderer config={baseConfig} data={page.puckData} />

What it does

An editor in Payload

The plugin registers the editor view, API endpoints and Edit with Puck buttons.

Render and editor configs

Use baseConfig for rendering and editorConfig in PuckConfigProvider.

Reusable templates

The puck-templates collection stores content for the Template component.

Composable integrations

Bundle components, categories and optional editor plugins in integrations.

Preview stylesheets

List the styles your isolated editor canvas needs in editorStylesheets.

Experiment slots

Combine payload-puck >=0.10.3 with payload-experiments >=0.4.0 for slot experiments.

When to use it

• Editors need to assemble pages visually from components you control.
• You want page content stored in Payload and rendered by your Next.js app.
• You need shared templates or integrations that add blocks across projects.

Compatibility