Payload CMS Plugins

Open-source Payload CMS plugins for A/B testing, analytics, SEO, presets, comments, AI translation, and scheduled publishing. Drop one into an existing project, or start from Ideal CMS - the full starter at apps/cms, pre-wired on Payload 3 + Next.js 16 + Postgres.

About the Ideal CMS Project

Headless CMS SaaS gets expensive fast - you pay per seat, per language, per request, and hit limits as you grow. Ideal CMS is a self-hosted alternative: Payload as the foundation, extended with the plugins in this repo, plus the boilerplate every project needs - a block-based page builder, locale-scoped semantic search, SSO, deployment config. No license, no vendor lock-in. Use one plugin standalone, or the whole starter - same code either way.

Quick Start

Scaffold the Ideal CMS starter into a standalone repo:

npx create-ideal-cms new-cms-project

Interactive prompts collect a project name, brand color, Postgres URL, and optional OpenAI / Vercel Blob tokens. The scaffolder copies apps/cms, installs dependencies, and initializes git.

To add an individual plugin to an existing Payload project, see the install command under each plugin below. To try the plugins locally first, see Run Demo Locally.

Packages Overview

Package	Version	Description
@focus-reactive/payload-plugin-ab		A/B testing plugin — page variants, middleware, analytics adapters
@focus-reactive/payload-plugin-analytics		Analytics plugin — GA4 dashboard in the admin, client tracking, optional A/B tab
@focus-reactive/payload-plugin-seo		SEO plugin — live Yoast analysis in the editor, SERP preview, zero DB fields
@focus-reactive/payload-plugin-presets		Presets plugin — save and apply reusable block configurations
@focus-reactive/payload-plugin-comments		Comments plugin — inline field comments, mentions, annotations, and collaboration
@focus-reactive/payload-plugin-translator		AI translation plugin — one-click translations on top of Payload's localization
@focus-reactive/payload-plugin-scheduling		Schedule publication plugin — schedule documents to publish at a future date
@focus-reactive/payload-plugin-html-preview		HTML preview plugin — live preview and click-to-edit for static and template-rendered sites
@focus-reactive/payload-plugin-netlify-deploy		Netlify deploy plugin — build, preview and publish Netlify sites from the admin, with the live build log
@focus-reactive/payload-plugin-visual-editing		Visual editing plugin — click-to-edit overlays on your Next.js frontend that deep-link into the admin field

A/B Testing Plugin for Payload CMS

a/b variations demo

Native experiments with a dynamic percentage of traffic going to each content variant. Control everything from the same page you're working on — page variants, middleware, and analytics adapters included.

npm install @focus-reactive/payload-plugin-ab
yarn add @focus-reactive/payload-plugin-ab
pnpm add @focus-reactive/payload-plugin-ab
bun add @focus-reactive/payload-plugin-ab

• Package: @focus-reactive/payload-plugin-ab
• 

Analytics Plugin for Payload CMS

analytics demo

A full GA4-backed analytics dashboard right inside the Payload admin — KPIs, traffic, top pages/sources/events, devices, geography, sessions, journeys, and lead-action conversions. GA4 stays the source of truth (nothing touches your database), and a tiny client tracking layer fires page views and conversion events for you. Includes an optional A/B analytics tab that pairs with the A/B testing plugin.

npm install @focus-reactive/payload-plugin-analytics
yarn add @focus-reactive/payload-plugin-analytics
pnpm add @focus-reactive/payload-plugin-analytics
bun add @focus-reactive/payload-plugin-analytics

• Package: @focus-reactive/payload-plugin-analytics
• 

SEO Plugin for Payload CMS

seo analysis demo

Real-time SEO analysis right inside the document editor, powered by Yoast. A button in the editor toolbar opens a drawer that reads your unsaved form values and runs the full Yoast engine in the browser — keyphrase optimization, on-page checks, readability, inclusive language, content vitals, and a live Google SERP preview. Nothing touches your database: zero new fields, collections, or globals.

npm install @focus-reactive/payload-plugin-seo
yarn add @focus-reactive/payload-plugin-seo
pnpm add @focus-reactive/payload-plugin-seo
bun add @focus-reactive/payload-plugin-seo

• Package: @focus-reactive/payload-plugin-seo
• 

Presets Plugin for Payload CMS

Multiple pre-configured block configurations you can use to build up your pages. It's like having multiple versions of default values — because content teams prefer editing over creating from scratch.

npm install @focus-reactive/payload-plugin-presets
yarn add @focus-reactive/payload-plugin-presets
pnpm add @focus-reactive/payload-plugin-presets
bun add @focus-reactive/payload-plugin-presets

• Package: @focus-reactive/payload-plugin-presets
• 

Comments Plugin for Payload CMS

comments demo

A way to collaborate inside the CMS. Inline field comments, mentions, annotations — helpful for both the content team and developers, letting everyone leave feedback directly inside the admin.

npm install @focus-reactive/payload-plugin-comments
yarn add @focus-reactive/payload-plugin-comments
pnpm add @focus-reactive/payload-plugin-comments
bun add @focus-reactive/payload-plugin-comments

• Package: @focus-reactive/payload-plugin-comments
• 

AI Translation Plugin for Payload CMS

Payload already has a localization plugin, so we built a plugin to do AI translations on top of it — fill in every localized field with one click. Pluggable providers (OpenAI included), bulk translation from list view, and full Lexical rich-text support.

npm install @focus-reactive/payload-plugin-translator
yarn add @focus-reactive/payload-plugin-translator
pnpm add @focus-reactive/payload-plugin-translator
bun add @focus-reactive/payload-plugin-translator

• Package: @focus-reactive/payload-plugin-translator
• 

Scheduled Publishing Plugin for Payload CMS

publish scheduling demo

Payload CMS natively supports scheduled publishing, but not for serverless platforms like Vercel. Since that's where we deploy most of our projects, we built a plugin that makes it work.

npm install @focus-reactive/payload-plugin-scheduling
yarn add @focus-reactive/payload-plugin-scheduling
pnpm add @focus-reactive/payload-plugin-scheduling
bun add @focus-reactive/payload-plugin-scheduling

• Package: @focus-reactive/payload-plugin-scheduling
• 

HTML Preview Plugin for Payload CMS

Live preview and click-to-edit for frontends that are not a React app — static site generators, template engines, anything that renders HTML. The CMS asks the site to render the document with its own templates, unsaved edits included, and shows it in the admin; a click on a block opens it in the form, tabs and collapsed rows included, and a focused field highlights its block.

npm install @focus-reactive/payload-plugin-html-preview
yarn add @focus-reactive/payload-plugin-html-preview
pnpm add @focus-reactive/payload-plugin-html-preview
bun add @focus-reactive/payload-plugin-html-preview

• Package: @focus-reactive/payload-plugin-html-preview
• 

Netlify Deploy Plugin for Payload CMS

A frontend on Netlify only changes when it is rebuilt. This plugin puts that step in the Payload admin: a Publish button beside Save that builds the site, streams the Netlify build log into a drawer, locks while a build runs and shows why one failed — for one site, or a CMS that feeds dozens.

npm install @focus-reactive/payload-plugin-netlify-deploy
yarn add @focus-reactive/payload-plugin-netlify-deploy
pnpm add @focus-reactive/payload-plugin-netlify-deploy
bun add @focus-reactive/payload-plugin-netlify-deploy

• Package: @focus-reactive/payload-plugin-netlify-deploy
• 

Visual Editing Plugin for Payload CMS

Click-to-edit for React/Next.js frontends. Draft content read through the Local API carries invisible field-path markers (Vercel stega); a frontend overlay turns them into Edit badges, and a click opens the exact document and field in the admin — tabs, collapsibles and array rows expanded, the input scrolled into view and focused. Works in Live Preview and in a separate tab.

npm install @focus-reactive/payload-plugin-visual-editing
yarn add @focus-reactive/payload-plugin-visual-editing
pnpm add @focus-reactive/payload-plugin-visual-editing
bun add @focus-reactive/payload-plugin-visual-editing

• Package: @focus-reactive/payload-plugin-visual-editing
• 

Run Demo Locally

This repo ships two ready-to-run Payload apps:

• apps/dev — minimal sandbox with every plugin wired up, backed by SQLite. Use this to try the plugins or hack on them.
• apps/cms — full Ideal CMS starter on Postgres (block-based page builder, SSO, semantic search, AI translations). See apps/cms/README.md for setup, or scaffold a standalone copy with npx create-ideal-cms.

The steps below cover the apps/dev sandbox.

Prerequisites

• Bun installed
• Node.js ^18.20.2 or >=20.9.0

Steps

1. Clone the repository

   git clone https://github.com/focusreactive/payload-plugins.git
   cd payload-plugins
   

2. Install dependencies

   bun install
   

3. Configure environment variables

   Create apps/dev/.env with the required values:

   cat > apps/dev/.env <<EOF
   DATABASE_URL=file:./dev.db
   PAYLOAD_SECRET=replace-me-with-any-random-string
   EOF
   

4. Start the dev server

   bun run dev
   

5. Open the admin panel

   Visit http://localhost:4040/admin and create your first admin user. Every plugin in this repo will be loaded and ready to try.

Contributing

Let's grow the Payload CMS ecosystem together. Issues, discussions, and PRs are all welcome.

About

Built and maintained by FocusReactive, a headless CMS and eCommerce engineering agency. We build on Payload for clients and ship what we needed on those projects back here - see Ideal CMS for the full picture, or talk to us about a Payload build or migration.

Maintainers

Maintained by FocusReactive. @ChiefCreator and @SearheiParkhamchuk are the main maintainers; @dogfrogfog is a secondary maintainer. See CODEOWNERS for reviewers on pull requests.

License

MIT