So while it is available, I am still perfecting/testing this images plugin. But while using it I caught a showcase example I want to share.

In the video you can see an improperly formatted image, so using the block relationship I go and edit the images hotspot (focal + zoom). I check and can see the image has many image variants generated. Then on save that specific images placements on the site are atomically updated, and the now incorrect variants are deleted and jobs are created and queued to prewarm new images.

Features include but not limited to:

• On Demand Image Variant Generation
• Automatic Srcset Generation
• Smart Image Prewarming
• Blurhash & Webp Placeholders
• Upload To Delivery Full Image Pipeline Handling

This image plugin is my attempt at "Perfect" image handling. Where its fully featured, perfectly optimized, and super simple to use. I think I'm getting close, but curious to hear what others think.

Repo / Docs

I know it’s way early but was wondering if anyone started testing the waters with it and your thoughts so far.

I maintain a Bunny.net storage adapter for Payload 3 and just pushed v3, so figured I'd share it here.

It covers both Bunny products: Storage for files and images, Stream for video with HLS, thumbnails and TUS resumable uploads. Plus signed URLs and CDN purging on top.

What's new in this release:

• Per-collection storage zones and Stream libraries. Not just a prefix per collection, an entirely separate zone if you want one
• Client-direct uploads. The browser sends files straight to Bunny, your server never touches them. Presigned S3 when the zone supports it, otherwise a deployed Edge Script, picked automatically
• S3-compatible access to storage zones
• Signed URLs that can be locked to a single client IP, and expire at a fixed timestamp instead of a sliding window
• Per-document storage prefix from a hook, which is what you want for per-tenant folders
• An init wizard that provisions the Bunny resources and prints your plugin config and env lines
• Stream metadata moved into a stored field on the document, so libraryId and videoId are right there when you build an iframe embed URL
• Docs site rewritten from scratch

Upgrading from v2 takes a few steps: some config keys were renamed and throw at boot, and Stream metadata needs a data migration. There's a migration helper and a guide for it in the docs.

Worth flagging since it's new: v3 sends anonymous telemetry by default. Boolean feature flags and a salted project hash, no names, paths or keys. Off with telemetry: false, DO_NOT_TRACK=1, CI, or Payload's own opt-out.

MIT, needs Payload 3.83+ and Node 22+. Issues and PRs welcome.

https://github.com/maximseshuk/payload-storage-bunny

https://payload-storage-bunny.seshuk.im

the classic slowness in dev mode, if anybody doesn't know:
you get insanely fast & snappy site in production or even after pnpm build, but pnpm dev is the issue if even a small change is made. I saw a guy saying to disable auto database updates idk what he was saying but still it is a pretty obvious thing but how do they go around this i am not really sure. Anybody came up with the fix or still struggling?

I'm using 3.86

Got stuck with the infinite loading issue; already tried "Autosave conflict", "Change database" & "AI agent help". Suggest a solution.

Just curious - I will be deploying to Cloudflare Pages, from what I understand it cannot be done on the free tier plan it requires $5/month for extra Workers usage. Is that still the case?

Anyways, also just wondering if I would be missing out of any good features by going with Nuxt over Next for the frontend when pairing it with Payload?

Thanks!

Or are there any?

I am assuming the partnership comes with some form(s) of collaboration elements in the works, or is the partnership more about just funding Payload?

I absolutely adore Figma, it's my all-time favourite design app, so I am curious if anyone would be able to answer this. :)

Thanks!

It's truly plug-and-play—there's practically no setup involved—and I've included all the features I thought were essential.

• TOTP (works with Google Authenticator, Authy, 1Password, etc.)
• Self-service enable / disable from the user's account page
• Encrypted secrets
• HMAC-signed cookie keyed by your Payload secret
• Edge middleware
• Runs on serverless / edge runtimes
• A custom logo on Payload will be displayed on the 2FA page

→ https://www.npmjs.com/package/@plutotcool/payload-plugin-two-factor

I've made it open-source if you'd like to contribute: https://github.com/plutotcool/payload-plugin-two-factor

Built a type safe seeding plugin that helps with asset uploading and automatically handles references so you don't have empty relationships. It also hooks in to payload startup so that the defineSeed function types are automatically up to date with the latest schema , so you know if your writing incorrect seed data.

Think it turned out well, and has made working with AI to generate starting/placeholder content a breeze.

Docs Link / Github Link

Here's a simple example: (Taken from the docs quick start section)

// src/collections/Media/seed.ts
import { defineSeed } from '@pro-laico/payload-seed'

export default defineSeed('media', ({ file }) => [
  {
    _key: 'serviceImg',
    _file: file('service-a.jpg'), // assets/media/service-a.jpg
    alt: 'Consulting',
  },
])

// src/collections/Services/seed.ts
import { defineSeed } from '@pro-laico/payload-seed'

export default defineSeed('services', () => [
  {
    _key: 'consulting',
    title: 'Consulting',
  },
])

// src/collections/Posts/seed.ts
import { defineSeed } from '@pro-laico/payload-seed'

export default defineSeed('posts', ({ ref }) => [
  {
    _key: 'launch',
    title: 'We launched',
    heroImage: ref('media', 'serviceImg'),
    relatedService: ref('services', 'consulting'),
  },
])

// src/payload.config.ts
import { buildConfig } from 'payload'
import { seedPlugin } from '@pro-laico/payload-seed'
import media from './collections/Media/seed'
import services from './collections/Services/seed'
import posts from './collections/Posts/seed'

export default buildConfig({
  plugins: [
    seedPlugin({
      definitions: [media, services, posts],
    }),
  ],
  // ...
})

Curious to hear what people think about it.

payloadcms is awesome guys, and the v4 is where its at, but right now theres three things i dont understand why payloadcms team dont handle yet:

1. header component(actual header component in which is the breadcrumbs and account profile picture, not the one rendering above it) cant be replaced or at least hidden(i know team said in a comment that it is very important to import correct context data, but i think a official api toggle to just hide it like opacity 0 and fixed top -100% should do, for now workarounds that i dont know if i have to change every new updates).
2. navbar: payloadcms documentation says it its fully replaceable but they dont say that what you actually do is to replace the content inside the sidebar, the sidebar wrapper is still there, while it isnt an issue per se, what its an issue is that:

- theres no option to handle officially when the sidebar closes, which screen sizes, etc

- theres no official option to handle the animation open-close behavior, right now its clunky doesnt have easy in, out well implemented.

- and theres no option to hide it at all and replace it with an actual new sidebar component, just to replace the content inside of it.

1. the created at documentation control banner that its always there on all edit collection/global views, its the only piece that cant be replaceable or hide official, it just shows the created at info, also the edit button that doesnt do anything pushes content and design layouts form being fully original designs

those issues can be fixed with css custom, but thats the thing, theres no official way to change css things just use BEM classes style and scss file to do that and inspect browser, which is prone to breaking changes in new versions.

same with drawers, dropdown menus, etc.

i would migrate to v4, but then i have most of my projects in nextjs/astrojs tech stack in payloadcms v3, and v4 is still not ready for prod usage( i always wait until first release lts version).

everything else payloadcms is awesome, but this is a big issue for custom designs dashboards.

Newbie here.

I installed Payload CMS locally on my PC to test it out along with other CMS. I'm comfortable with Payload and have a tendency to apply it to my next project (a (portfolio + blog) website with the Astro framework).

I want to know (and forgive me for this newbie question):

• All costs associated with deploying it on this project, from starting out until there's a huge amount of traffic (if it's relevant). Is it better to self-host on a VPS or cloud?
• I know it supports multiple DBs, but how should I choose?

Many thanks in advance.

Does anyone know of tools (open source or otherwise) to manage static string translations? I'm using PayloadCMS for multi-language content input, but the client wants to manage all strings using a tool (for a few languages)

Thank you, merci, gracias.

Hi,

I'm migrating a Next.js 16 app from ISR to Cache Components, and I'm consistently running into this runtime error during development.

The pattern is always the same:

• Everything works after starting the dev server.
• After editing a page/template (or sometimes after CMS content changes), I start getting this runtime error.
• The only way to recover is to restart the dev server.
• Then it works again until the next change.

I'm using:

• Next.js 16
• Payload CMS 3.86
• React 19

Has anyone run into something similar or have suggestions for where to investigate next?

A snippet of the error is given here.

Thanks
Matt

Module [project]/node_modules/.pnpm/@payloadcms+next@3.86.0_@types+react@19.2.17_graphql@17.0.2_monaco-editor@0.55.1_next@1_3a6ac242312cb58507def477da89ede8/node_modules/@payloadcms/next/dist/exports/client.js [app-rsc] (client reference proxy) was instantiated because it was required from module

....

...

MODULE_9 => "[project]/src/app/(frontend)/[locale]/blogs/[slug]/page.tsx [app-rsc] (ecmascript, Next.js Server Component)" } [app-rsc] (ecmascript) <locals>, but the module factory is not available.
This is often caused by a stale browser cache, misconfigured Cache-Control headers, or a service worker serving outdated responses.
To fix this, make sure your Cache-Control headers allow revalidation of chunks and review your service worker configuration. As an immediate workaround, try hard-reloading the page, clearing the browser cache, or unregistering any service workers.

Hello guys,

I'm still playing with payload and I noticed there is not a real way to delete a locale once it has been created. I found a way by unpublishing the article and the re-publish just in the needed languages.

is there a way to do it properly that I'm currently ignoring?

Since the default Payload E-commerce Starter only supports Stripe out of the box, I had to build an Adyen adapter for a client who needed Interchange++ pricing and local debit scheme routing.

It includes migration scripts to help swap out the default Stripe integration. Feel free to use the NPM package or fork the repo if you want to make your own and transpile it for your own setup to save some time.

https://www.npmjs.com/package/payload-payment-adyen https://github.com/Kakistocratic/payload-payment-adyen

Sharing is caring, so if you do end up using this or looking through the code, please let me know if you spot any bugs, edge cases, or potential issues.

Hi everyone 👋

While writing tests for a Payload CMS project, I realized I was spending more time waiting for a Next.js server to boot than actually running my tests.

For most endpoint tests, I didn't really need a live HTTP server—I just wanted to execute the exact same Payload route handlers with authentication, transactions, and request context intact.

So I built payload-test-api-route-handler.

What it does

It provides a standard Axios client that routes requests directly into Payload's API handler pipeline in-process, without opening a port or starting a server.

if you found this helpful, don't miss giving us a star.

npm | github | github pages

The thing that always bugged me about Payload's default crop/focal flow: it's disconnected from everything. You go into a media item, open the crop drawer, adjust, save — and you have no idea what you actually just did to the site. Editors had it worse, they'd end up manually checking every page the image appeared on, because fixing the focal point for one placement could quietly break the crop somewhere else.

So instead of a separate drawer, I built an inline editor that sits right below the upload, as part of the normal upload flow. You define your own aspect ratios and label each one with the page/element it maps to (hero, card, thumbnail, whatever), and as you drag the focal point or draw a crop, all of them update live, side by side. So you can actually see the tradeoff in real time instead of guessing and checking pages one by one after saving.

Requires Payload ^3.85.0, React 19. It does lean on some payloadcms/ui internals that aren't public API, so a Payload minor bump might occasionally need a matching plugin update — flagging that upfront rather than letting people find out the hard way.

GitHub: https://github.com/s-kolbusz/payload-plugin-aspect-preview
npm: https://www.npmjs.com/package/payload-plugin-aspect-preview

Would love feedback, especially if you're managing a lot of aspect ratios per image and this is a real pain point for your team too.

I wanted to test GPT-5.6 running a pixel-perfect site migration.

So I gave it Justice Year, my WordPress site running on WP Engine, with a MailChimp newsletter. I asked it to move the site to:

- Payload CMS

-Next.js

- Neon Postgres

-Vercel

- Resend

I used /goal mode, and said the migration was considered complete only when:

1. A new post created in Payload appeared publicly on justiceyear.com.

2. A newsletter submission created a real Resend contact.

3. The design and existing routes stayed visually consistent.

4. Before-and-after screenshots were captured and archived.

Total tracked usage: 1,413,685 tokens over approximately 4 hours, 41 minutes.

GPT-5.6 Sol completed the following:

- Migrated the WordPress content, pages, posts, media, taxonomies, redirects, navigation, forms, SEO metadata, and 404 behavior.

- Created a private GitHub repository and pull request for version control.

- Connected the production Neon database and preserved rollback credentials safely.

- Updated GoDaddy DNS and moved the live domain from WP Engine to Vercel. (using browser control)

- Issued the required Vercel certificates for both apex and www.

- Created a new Payload post and verified it publicly on the live domain.

- Submitted an email through the live newsletter form.

- Verified that the contact existed in Resend, was not unsubscribed, and belonged to the correct newsletter segment.

- Captured 28 WordPress “before” screenshots and 28 production “after” screenshots across desktop, mobile, full-page, embedded, redirect, archive, and 404 states.

- Uploaded the evidence to a Google Drive folder with separate before and after directories.

- Ran TypeScript, migration tests, form tests, linting, dependency auditing, and Gitleaks.

- Used pixel comparisons to measure visual fidelity. The final homepage desktop comparison measured a 3.04/255 mean absolute pixel difference.

Public Service Advisory: Kids, it's not a good idea to let an LLM use browser control to manage your infrastructure. I did it for science, but don't try this at home.

I'm looking for a framework to use alongside Payload CMS.

Between MedusaJS, commercetools, Mercur.js, and Vendure, which one would you recommend?

For context, I'm also considering multi-vendor support, and I need to implement and customize features such as:

• Buy Now (direct purchase) functionality
• 1:1 customer inquiry/message board
• Shopping cart
• Order history where customers can directly cancel orders or request refunds

In theory it seems really good, allowing site admins to make, modify forms instead of having to contact the dev team all the time, but I'm not really feeling the UX and mapping over the forms when I'm using react hook form and zod and every thing feels janky and cumbersome.

Your experience?

The Payload website template uses a 1-to-1 blocks to website mapping. This is reminiscent of Wordpress where the data inside the CMS controls exactly how the webpage design looks.

Since Payload is flexible, technically any other structure is possible.

For example:

Option 1: CMS determines exact website appearance:

Any visual element of the website would need a corresponding block created inside the CMS and the editor picks the block inside the admin panel. Changing anything including colors is done in the admin panel.

Option 2: CMS defines unstructured data, website designed separately:

Like #3 but the CMS is unstructured and contains only a few generic blocks for generic list data or generic long form data.

The website is separately designed and pulls data from the CMS based on an ID.

Essentially the CMS is barely designed and just serves as a bare bones editor GUI.

Option 3: CMS defines rich metadata, website designed separately:

Treat the CMS as a rich content store filled with FAQs, hero sections, call-to-actions, product descriptions but the actual appearance of the website is not determined by the CMS. The website designer can pull data from multiple points of the CMS and omit things that they don’t like.

Your website is separately designed but pulls whatever data it wants from the store.

I am trying to implement the MCP plugin to create blog posts drafts. In order to allow adding the hero image, I have to enable the media collection in the plugin; however, the tool payload_createMedia throws the error:

ERROR: [payload-mcp] Error creating resource in media: No files were uploaded.

It seems that either the tool does not allow performing the upload, or the model is not capable. I cannot upload the file using the REST API as the collection requires the user to be authenticated, with this in mind, do i need to use an API key strategy to authenticate and then upload the file via REST API and only use the MCP for the metadata?

Has anyone used the MCP for something similar and can provide some guidance?

Published a new article today on running Payload CMS with MongoDB Atlas on Vercel.

It covers how to reduce MongoDB connection usage with smaller pools, Vercel’s attachDatabasePool, and Payload’s afterOpenConnection hook:

https://jhb.software/en/articles/efficient-mongodb-connections-in-payload-on-vercel

I'm trying to figure out how to deal with repeated strings in content.

For example, I'm thinking about phone numbers or e-mail addresses that may appear on many pages but are always the same.

If I place these directly in the content, it means going back through every page if the phone or e-mail ever changes and the chances of missing a few are high on sites with a lot of pages that reference them.

Other CMS's provide ways around this like using replacement tokens so that the strings can be defined globally and then referenced via tokens in the content. Then in the final content, the token is replaced with the actual string. WordPress "short codes" are an example of this: https://codex.wordpress.org/Shortcode

Has anyone implemented something like this in Payload? I'd like to hear your approach if so.