Payload Comments: anonymous comments and reactions for Payload 3

@navanem/payload-comments is a free, open-source plugin that adds a complete commenting system to any Payload 3 application. Visitors can leave anonymous comments and reactions on your posts, pages or any other collection, while you keep full control from Payload’s own admin: pre-publish moderation, per-collection on/off switches, and a built-in statistics dashboard. There is no third-party service and no per-seat pricing — the comments live in your own database.

What it does

The plugin registers two collections (comments and reactions) plus a small REST API, and ships a ready-to-use React component for the front end. Readers post a comment with a name, an optional email and a mood emoji; they can reply up to three levels deep and react to existing comments with a configurable emoji set. Every submission runs through lightweight anti-spam — a honeypot field, per-IP rate limiting, and length and link rules — and, when moderation is enabled, waits as pending until you approve it in the admin.

Key features

• Anonymous comments with a name, optional or required email, and a mood emoji.
• Reactions on individual comments using a configurable emoji set.
• Up to three levels of nested replies.
• Optional pre-publish moderation workflow (pending, approved, spam, trash).
• A Comments Settings global to enable or disable commenting per collection at runtime.
• A Comment Statistics admin view: KPIs, per-collection and per-mood breakdowns, recent comments and filters.
• Built-in anti-spam: honeypot, per-IP rate limiting, and configurable length and link rules.
• Privacy-friendly: visitor IP addresses and fingerprints are stored only as salted hashes.
• A drop-in <Comments /> React component, or build your own UI on the REST API.

Installation and setup

Add the plugin to your Payload config and list the collections that can be commented on:

import { commentsPlugin } from '@navanem/payload-comments'

export default buildConfig({
  plugins: [
    commentsPlugin({
      enabledCollections: ['posts', 'pages'],
      requireApproval: true,
      requireEmail: false,
    }),
  ],
})

Set a salt for hashing visitor IPs in your environment:

COMMENTS_IP_SALT="a-long-random-string"

Drop-in React component

On the front end, render the bundled component wherever you want the thread, passing the collection slug and the document id:

import { Comments } from '@navanem/payload-comments/client'

export default function PostPage({ post }) {
  return <Comments relationTo="posts" docId={post.id} />
}

The component fetches the approved thread, renders replies and reactions, and posts new comments through the plugin’s REST API. You can also skip the component entirely and build your own interface against the same endpoints.

Moderation, settings and statistics

Everything is managed from Payload’s standard admin. Comments land in a Comments collection where you can approve them, mark them as spam, or move them to trash. A Comments Settings global lets you turn commenting on or off per collection without a redeploy: when a collection is disabled, new submissions are rejected and the front-end widget shows a closed notice instead of the thread. A Comment Statistics view adds an at-a-glance dashboard — total, approved, pending, spam and trashed counts, reactions, per-collection and per-mood breakdowns, and the most recent comments — all filterable by collection, status and time period.

Built with

Payload Comments is written in TypeScript as a native Payload 3 plugin. It uses only Payload’s own collections, globals, endpoints and admin components, so it works with either the Postgres or SQLite database adapter and needs no external moderation service. The front-end component is a self-contained React component that ships with its own styles.

Requirements

• Payload 3.x.
• React 18 or 19 (peer dependency).
• A Postgres or SQLite database — whichever your Payload app already uses.

Get started

Install from npm, or directly from GitHub, and add the plugin to your config:

pnpm add @navanem/payload-comments
# or straight from Git:
pnpm add github:navanem/nanavanem_payload_comments

payload, react and react-dom are peer dependencies. See the repository README for the full configuration options, front-end integration guide and moderation details.

Open source

Payload Comments is released under the MIT License and is free to use, modify and redistribute. Issues and contributions are welcome on GitHub.