Payload launches 1.0

Published On
Payload launches 1.0
Payload launches 1.0

After being in public beta for over a year and a half, Payload has officially launched version 1.0. This new version includes a ton of new features and significantly expanded tests. Payload is now stable and ready for production.

It's been a whirlwind of a summer so far for the Payload team. We have been accepted into Y Combinator's S22 batch, made the switch to a free and fully open-source MIT license, and the core team has gone full-time on Payload. We've also been hard at work making Payload even more powerful.

Version 1.0 is available now, and ships with a ton of new features and goodies.

Dark mode

One of the biggest and most notable changes within 1.0 is the addition of a beautiful admin UI dark mode. In addition to modernizing and further polishing the UI, we've updated the CSS so that all colors use CSS variables instead of Sass variables, and dark mode came together super nicely. Payload will read from your OS settings to determine if you prefer dark mode or not, and set your preferences automatically—but you can specify light or dark mode by visiting the Account view within Payload's UI.

Payload Dark Mode Screenshot

Tabs field

As developers, it's our job to deliver our non-technical users with a beautiful and highly usable admin UI, so they can manage the content that Payload stores. One of the things Payload is best at is that we give you an incredible amount of customization and flexibility potential to do exactly that.

With 1.0, we've launched a new Tabs field type, which allows you to nest fields within a "tabbed" interface, similarly to Advanced Custom Fields' Tabs field. With this feature, you can clean up and segment your admin UI to add clarity and simplicity for your editors.

Payload Tabs Screenshot

Collapsible field

We've also added the Collapsible field type, which lets you collapse / expand certain fields so that they are only visible and mounted on the page when they are relevant to your editors. The field smartly stores the last collapsed / expanded state within Payload's database, so if an editor collapses or expands a field, leaves the page, and then revisits, the collapsible will retain its prior state automatically.

Modernized admin UI

1.0 ditches the light gray backgrounds that Payload has classically featured in favor of a more minimal "Medium-like" experience. Subtleties have been added everywhere, and components across the board have been optimized. The Rich Text field has seen some significant visual polish as well, including a "sticky" toolbar so you always have access to your rich text tools.

Payload's UI far outshines other headless CMS, and the best part is that we stick to simplicity wherever possible to allow you to inject your own custom components without having to get a PH.D in how Payload works before you can be productive when customizing the UI.

Redesigned arrays, blocks, and group fields

We've re-used the new the Collapsible component within our existing Array and Block fields to tighten up and improve the editing experience of using array and block field types. You can now collapse / show all rows — and, same with the Collapsible field itself, arrays and blocks smartly remember the "collapsed" state of each row, on a user-by-user basis.

These fields now also feature a way to "duplicate" rows, which is super handy when you're building lots of array / block rows and want to be productive.

Payload Blocks Screenshot

The Group field has also been updated to make less use of horizontal space, and add more visual clarity to what fields are grouped.

Payload Groups Screenshot

Responsive improvements

It's hard to believe that many other headless CMS don't work on mobile and tablet devices in 2022. But Payload does. And now, the responsive experience is even better than it was in public beta. Do everything that you can do on a laptop right on your phone with Payload's responsive UI.

Payload CMS Responsive Improvements Screenshot

Extensible auth strategies

This was one of the most upvoted features on our roadmap, and we're happy to say that 1.0 now fully supports a way for you to completely override (or even disable) Payload's built-in local authentication strategy with your own. You can now build passwordless, 2FA, third-party auth, or any other pattern you need just by configuring Payload to use your own strategies.

1
export default buildConfig({
2
admin: {
3
components: {
4
afterLogin: [
5
// Add your own React components to Login view
6
GitHubLoginButton,
7
],
8
},
9
},
10
collections: [
11
{
12
slug: "users",
13
auth: {
14
strategies: [
15
// Pass in your own PassportJS strategies
16
GitHubAuthStrategy,
17
],
18
},
19
fields: [
20
// user fields go here
21
],
22
},
23
],

Behind the scenes, Payload uses PassportJS, which offers a ton of built-in strategies that you can make use of. Inject your own login buttons directly into Payload's Login view, and let your editors authenticate however you need.

Completely overhauled & expanded testing

Prior to 1.0, Payload used Cypress for its end-to-end testing, and it all relied on a /demo folder within the source code which featured over 20 collections that all needed to be tested in parallel. With 1.0, both developing and testing the core Payload CMS is easier and more robust than ever. We've ditched Cypress for Playwright and completely removed our demo folder in favor of compartmentalized test / dev environments that are feature-specific.

Not only has this already paid dividends into the stability and reliability of Payload, but developing features has become significantly easier. You can try it for yourself if you clone down Payload, yarn, and then run yarn dev <test-suite-here>. For example, if you want to spin up a dev environment specifically for testing certain field types, you can run yarn dev fields and the environment within /test/fields will be started up.

This is only the start. The team is committed to continuing to expand tests. This new test / dev framework will make the process significantly easier.

Misc. bug fixes

With our expanded integration and E2E test suite, we've been able to fix a handful of existing bugs and Payload is now more stable than ever. Our GitHub issues have always been impressively low, but our goal is to continue to be committed to Payload's stability and reliability.

Breaking changes

Since public beta, our dev-facing API has seen an incredibly low amount of breaking changes, and at this point, we're confident in saying that it's unlikely to change significantly for quite some time. With our 1.0 release, we only have one breaking change, and it's a trivial migration. See the changelog for more detail, including how to update to 1.0. Spoiler—it's super easy and you probably don't have to do anything at all to upgrade.

Give us a star on GitHub

Join our community on Discord

We've recently started a Discord community for the Payload community to interact in realtime. Often, Discord will be the first to hear about announcements like this move to open-source, and it can prove to be a great resource if you need help building with Payload. Click here to join!

Get up and running with one line

Getting started is easy—and free forever. Just fire up a new terminal window and run the following command:

1
npx create-payload-app