DD Starter

A modern Payload CMS starter template featuring visual page editing, hierarchical content management, and enhanced authentication. Built and maintained by Delmare Digital.

This template serves as a working demonstration of the @delmaredigital plugin ecosystem for Payload CMS.

Included Plugins

@delmaredigital/payload-puck

Visual page builder powered by Puck. Create pages with a drag-and-drop interface instead of traditional block-based editing.

• Visual WYSIWYG page editing
• Pre-built components (Section, Flex, Grid, Heading, Text, Button, etc.)
• Multiple page layouts (Default, Full Width, Landing)
• Live preview in editor
• Server-side rendering support

@delmaredigital/payload-page-tree

Hierarchical content organization with automatic slug generation.

• Visual tree view for content hierarchy
• Folder-based URL structure
• Auto-generated slugs from path segments
• Works with Pages and Posts collections

@delmaredigital/payload-better-auth

Enhanced authentication using Better Auth.

• Email/password authentication
• Passkey/WebAuthn support
• Two-factor authentication (TOTP)
• API key management
• Role-based access control

Tech Stack

• Framework: Next.js 16 (App Router)
• CMS: Payload CMS 3
• Database: PostgreSQL (via Vercel Postgres/Neon)
• Styling: Tailwind CSS v4
• Storage: Vercel Blob Storage

Getting Started

Prerequisites

• Node.js 20+
• pnpm
• PostgreSQL database

Installation

1. Clone the repository
2. Copy environment variables:

   cp .env.example .env.local

3. Configure your environment variables (see below)
4. Install dependencies:

   pnpm install

5. Start the development server:

   pnpm dev

   The database schema is automatically synced in development mode (push mode).

Environment Variables

Required:

• POSTGRES_URL - PostgreSQL connection string
• PAYLOAD_SECRET - Secret for JWT signing (min 32 chars)
• BETTER_AUTH_SECRET - Secret for Better Auth (min 32 chars)

Optional:

• BLOB_READ_WRITE_TOKEN - Vercel Blob storage token
• PUCK_API_KEY - For Puck AI page generation (from puckeditor.com)

Project Structure

src/
├── app/(frontend)/     # Next.js frontend routes
├── app/(payload)/      # Payload admin routes
├── collections/        # Payload collections (Posts, Media, Users)
├── components/         # React components
├── lib/
│   ├── auth/          # Better Auth configuration
│   └── puck/          # Puck layouts and options
├── puck/              # Puck editor configuration
└── plugins/           # Payload plugin configuration

Usage

Creating Pages

1. Navigate to /admin/page-tree
2. Click "New Page" to create a page
3. Use the Puck visual editor to build your page layout
4. Publish when ready

Managing Content Hierarchy

The Page Tree view (/admin/page-tree) provides a visual interface for organizing your content. Drag pages to reorder or nest them within folders.

Authentication

Users are managed through Payload's admin panel with Better Auth handling the authentication flow. Roles (user, admin) control access to the admin panel and content.

Development

# Start dev server
pnpm dev

# Type check
pnpm check

# Build for production
pnpm build

# Run production build
pnpm start

Deploying to Vercel

This template is ready to deploy to Vercel:

1. Push your repository to GitHub
2. Import the project in Vercel
3. Configure environment variables in Vercel dashboard
4. Important: Override the build command to pnpm run ci

The ci script runs migrations before building, which is required for production deployments.

Database Migrations

The project uses push mode in development, which automatically syncs schema changes.

For production, migrations are created once and included in the repository. If you make schema changes:

# Create a new migration
pnpm payload migrate:create

License

MIT

---

Built by Delmare Digital