Payload CMS Just Released Payload 2.0

Payload, the headless and code-first CMS that works the way you do, just released its 2.0 version. From Postgres support to live previews, this update is filled to the brim with very useful but important features and changes.

In this post, we are going to show you the most important changes and additions to Payload.

And don't forget, we also got this week’s developer discount!

Adapter Patterns

The Payload 2.0 release introduces a new "adapter pattern" that provides increased flexibility and future-proofing across the codebase. This pattern allows core parts of Payload to interface with different technologies through adapters, rather than being tightly coupled to specific implementations.

The adapter approach has been applied to three key areas:

• Database interactions: Adapters enable support for additional databases beyond MongoDB, with minimal code changes required. This reflects user requests for more database options.

• Bundler for the admin panel: The Webpack-based bundler has been replaced with a more modular adapter-based system. This allows alternative bundling strategies to be implemented.

• Rich text editor: The Slate editor has been replaced with Lexical, connected via an adapter. This makes it easy to integrate other rich text editors in the future.

By abstracting core functions into adapters, the Payload team has made the codebase more flexible. This allows support for new technologies over time while maintaining compatibility for existing Payload projects. The adapter pattern reflects highly popular requests from the Payload roadmap.

Postgres Support

One of the most requested features for Payload has been support for additional databases beyond MongoDB.

The Payload team made a strategic decision to start with MongoDB, which provided the flexibility to build an incredibly powerful and fast API without compromise. Unlike some other headless CMS options, Payload places no limits on features like nested arrays, blocks, or ordered relationships when using MongoDB.

The Payload team has replicated all of MongoDB's capabilities within Postgres. Arrays automatically create linked tables, allowing relationships. Blocks can be nested. Ordered relationships are supported out of the box. The experience is seamless, using the same Payload API you know and love.

This was achieved by installing the new @payloadcms/db-postgres package. No compromises were made to Payload's capabilities. The team has simply expanded the underlying database options.

Vite Support

Based on popular demand, Payload 2.0 now supports the Vite bundler as an alternative to Webpack for the admin panel. This provides a faster development experience, especially after the initial startup.

The Payload team implemented Vite support through their new adapter-based architecture. Now Webpack and Vite can both be used interchangeably with Payload. Users have the flexibility to choose their preferred bundler.

The founder shares some personal thoughts on Vite - while impressive in some ways, he believes it also does a lot of "gymnastics" where the browser handles more work compared to Webpack. In his view, Webpack takes a simpler approach. However, Vite's speed boost is real, especially for rebuilds.

During their research, the team also evaluated other emerging options like rspack (Rust-based) and Turbopack (NextJS-based). These did not quite meet Payload's needs yet, but the team will continue to explore new bundling tech. The adapter approach makes it easy to integrate alternatives down the road.

For now, Vite support delivers on one of the most-wanted roadmap items. Users can choose between Vite and Webpack based on their preferences.

Admin UI

Long-time Payload users will be excited to hear that the admin UI has received major usability upgrades in version 2.0. The team has delivered on their commitment to evolve the admin experience for both non-technical and technical users.

Some highlights of the admin UI improvements:

• Collapsible sidebar to maximize horizontal space

• Reorganized edit views for increased flexibility and customization

• New components to build custom admin views

These changes make the most of available screen real estate and provide enhanced control over the editing interface. Admins can now customize their workflow even further.

The Payload team has been planning an admin refresh for some time. Version 2.0 realizes this vision with upgrades focused squarely on usability for all users. Both developers and non-technical content editors will appreciate the streamlined new editing experience.

This continues Payload's user-focused approach of constant refinement. The updated admin UI takes another big step toward an optimal editing experience for any use case. Long-time users will be excited to explore the improvements.

Live Preview

One of the most mind-blowing new features in Payload 2.0 is native support for live previews on collections and globals. This allows editors to see changes in real time as they edit content right within the Payload admin.

Massive credit goes to @jacobsfletch for masterfully implementing this complex capability directly into the core. The Payload team also wants to highlight the excellent work done by Dennis, Daniel, and Jan at pemedia.

They initially built a live preview plugin that extended Payload's capabilities. The Payload team could then integrate their open-source work directly into the platform. It's a fantastic example of open-source collaboration at its best.

Live preview reflects direct feedback from the community. Led by pemedia, users made it clear this was a highly desired feature. The Payload team took this user-driven request and made it a core part of the editing workflow.

Editors can now seamlessly preview content as they create it, leading to higher quality and productivity. Huge thanks to everyone involved in bringing this powerful new capability to life.

New Rich Text Editor

Payload 2.0 includes a brand new rich text editing experience powered by Lexical. This replaces the previous Slate editor.

Massive credit goes to community member Alessio, who developed a widely used Lexical plugin for Payload. His work demonstrated Lexical's strengths, so the team brought him on board and evolved his plugin into the default editor.

While Slate offered some advantages like JSON storage, it could be difficult to build custom elements. Lexical provides a much better developer experience here.

The new editor also aligns with Payload's goals for an intuitive, Medium-like minimalism combined with Notion-level capabilities. Key new features include:

• Sleek UI with popups and drag/drop

• Easier custom element creation

• Reuse Payload blocks directly in rich text

This last capability is a game-changer. Now the power of Payload blocks is available right within the editor.

The adapter approach still allows Slate use if desired, but new development will focus on Lexical. This better editor will power the primary content authoring experience going forward.

This post covered most of the important changes and additions to Payload 2.0, but a few items have been left out. Please visit Payload’s own post for more information.