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
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
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
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
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
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
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
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
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
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
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
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
-
Clone the repository
git clone https://github.com/focusreactive/payload-plugins.git
cd payload-plugins
-
Install dependencies
bun install
-
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
-
Start the dev server
bun run dev
-
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
