Overview

Edit Payload pages visually with Puck, inside the Payload admin, and render them on your Next.js frontend.

@delmaredigital/payload-puck puts the Puck drag-and-drop page builder inside the Payload admin. Editors build pages from components on a live canvas; the page is stored as JSON on a Payload document and rendered by your Next.js frontend.

One plugin call sets up:

A pages collection with Puck fields, drafts and a unique-homepage rule (or Puck fields added to the collection you already have).
API endpoints at /api/puck/:collection.
A full-screen editor view at /admin/puck-editor/:collection/:id, with "Visual Editor" buttons in the admin.
A puck-templates collection for the Template component.

You supply the Puck configuration through a React provider and add one frontend route.

src/payload.config.ts

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

export const puckPlugin = createPuckPlugin({ pagesCollection: 'pages' })

Start here

Installation

Requirements and the install command.

Quick start

Plugin, provider and frontend route in three steps.

Styling

Tailwind setup so components render styled.

Upgrade guide

What each breaking or security release asks of you.

Build with it

Built-in components

Layout, typography, media and interactive components.

Custom fields

Media, colour, background, spacing and layout fields.

Custom components

Build your own components with the field factories.

Existing projects

Add Puck next to legacy Payload blocks.

Integrations

Bundles of components and editor plugins, such as experiments on slots.

Email builder

Email-safe components and an HTML renderer.

Starter template

dd-starter is a Payload + Next.js starter with this plugin already wired up. To add the plugin to an app by hand, copy from the starter files.

Start hereCopy Anchor Link