dd-starter

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 and roles

Better Auth handles sign-in; Payload's admin panel manages users. Public sign-up is enabled, so the role model is deliberately strict:

Role	Admin panel	Author content (pages, posts, media, globals, redirects, templates, folders)	Read published content
admin	yes	yes	yes
user	no	no	yes
anonymous	no	no	yes

The first account created becomes admin; every later sign-up is a user and cannot set its own role. Drafts, version history, the Page Tree endpoints, the job runner and draft preview are all admin-only. The access helpers live in src/access/ and the integration tests in tests/int/cms-access.int.spec.ts pin this matrix.

Development

# Start dev server
pnpm dev

# Type check + lint
pnpm check

# Integration tests (needs POSTGRES_URL; CI runs them against a Postgres service)
pnpm test:int

# 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