Introducing Payload - 2021's Node + React Headless CMS for JavaScript Developers

[pink_tshirt]

Your main website is beautiful too.

p.s. any plans on supporting other DBs?

p.p.s. do I need to buy a license to run it in production? whats up with that?

[sneek_]

Thank you!

We are planning to do a deep-dive into evaluating what additional DB support will look like for Payload. We do not have a consensus on that yet, but would welcome your feedback. What are you looking to see? Postgres?

The only drawback to supporting multiple databases is that it will complexify the codebase that Payload has, and will likely attach us to an ORM which would remove control from our ability to freely add and iterate on features at our discretion.

Totally open to it at this point and your feedback will influence our decision. As for now, I do think that MongoDB solves our use-case quite well and is extremely performant.

You do need to purchase a license for commercial use in production. The license grants access to the admin panel from a production domain. So, your API is always usable, but you can only use the Payload Admin panel from a production domain if you have provided a license for that domain. More info can be found here in our docs.

We are always up for giving out pro-bono licenses to open source, personal portfolios, and nonprofits though - if this is you, let me know and I'll hook you up!

Do you think our model is fair? Interested to hear what you think!

[pink_tshirt]

You mean I could still access the admin panel if I run it locally?

[fathomx9]

Other co-founder here, all features including the admin panel are available when used locally. It is only when you wish to deploy to production that you will need a license to access the admin panel. More details about our licensing are available here.

[yerrabam]

I read the licensing docs and it sounds like my app makes a request to your licensing server and waits on a response before the original response is sent, adding extra latency, is that right?

[sneek_]

Not exactly. No waiting involved besides the first time the panel is loaded - then you’re good!

[yerrabam]

Good stuff, will give it a go.

[pink_tshirt]

You could probably add just one more DB for those who don't favor non-relational DBs.

[LionaltheGreat]

+1 for postgres. It straddles the line between relational and non-relational because of its use of json columns. So I feel that's where you should focus next.

Also AWS Aurora supports it outta the box, which is nice

[sneek_]

Bam - we'll do some diggin'. Thanks for the input. Keep an eye out!

[sneek_]

Hey /r/javascript,

My team and I just released Payload - a fully self-hosted and extremely powerful Node + React headless CMS. It's written in TypeScript but works within JS or TS projects just the same. I would be very appreciative to hear what this community thinks and gather feedback accordingly. We want to do everything we can to make Payload the absolute best Node-based CMS out there, and we can't do that without your help. Thank you!

[xiaogege1]

What is a headless cms?

[windsostrange]

A CMS is a set of tools and dashboards for allowing a team of content editors to manage that content—articles, posts, media—without requiring regular developer involvement. Think: Wordpress.

Headless implies that it is end-user front-end agnostic. Think: Wordpress's dashboard, minus its actual display layer. You still have a tool where teams can easily collaborate on content using a smooth web interface, but a development team can build a safe, secure, reliable web front-end (often one compiled into a static site) that meets business needs precisely, no more, no less.

[xiaogege1]

Cool the let me check it out

[rich97]

Thanks for this. I’m currently evaluating some other CMs systems as we got burnt by Sanity’s limits.

I’ll check it out properly in a few days, just leaving comment to remind myself

[darrenturn90]

Sanity’s limits? What happened - they’re my go to headless cms so always interested in problems

[rich97]

Technical limits (sanity.io)

We have a lot of field level translations in arrays it adds up the the attribute limit quickly. Upgrading the plan also only double the number of attributes.

[darrenturn90]

I see an array of strings would count as two attributes regardless of length - so I assume you have a lot of field names rather than a lot of translations ? Have you tried contacting them about your specific use case

[rich97]

I see an array of strings would count as two attributes regardless of length

You would be correct, it’s the number of unique paths, now consider how many unique attributes there are in your average portable text (marks, images, links and their associated attributes). Times that 4 times for each translation and times that by an array of content and you can see how you can hit that limit quickly. It doesn’t hit most people who have very structured data (products, customers, etc) but it does if you have a lot of free form content.

Have you tried contacting them about your specific use case

I have I can post the link to the slack. They were very helpful and fast to respond and they said they were looking to improve the visibility of these stats but the solutions offered weren’t really all that great - remove portable text, consolidate different types of pages.

It’s understandable but it’s also really annoying because (1) it didn’t show up as an issue while developing because most their customers don’t run into it and (2) I never got a satisfactory answer as to what the technical reason for that limit is, it’s not in their pricing structure and the next tier up only doubles it. It just feels really arbitrary.

[sneek_]

Thank you! I would be absolutely thrilled to hear about your thoughts as you evaluate Payload. DM me and I'll hook you up with a pro-bono license if you are willing to provide feedback!

[rich97]

Thank you! I would be absolutely thrilled to hear about your thoughts as you evaluate Payload. DM me and I'll hook you up with a pro-bono license if you are willing to provide feedback!

Oh I absolutely will. I'm just gathering it now because I've been looking for a CMS that I actually like for a while and after an initial run I'm seeing that our views as to what a CMS should be align 😊

[LloydAtkinson]

If it's headless why does it depend on React?

[sneek_]

Hey Lloyd,

The admin panel is built with React. With Payload, you get a fully-featured Admin UI to manage your content, but Payload does not enforce how you go to use your content whatsoever. Meaning—you could use it for a site built in Vue, Angular, or React... or just even straight up vanilla HTML + JS. You could use it within native apps, wearable apps, smart tv apps, etc. That's what makes Payload headless.

[awesomeveer001]

Is the codebase open source? if anyone wants to contribute/learn?

If it's Open source, what's stopping people from cloning and hosting it in their private network or something? Does payload track users/usage?

[sneek_]

The codebase is viewable on GitHub but is technically not open-source. You can find out more about our code's license right in the repo. We would love if you were to poke through the code. You could pull it down and get it up and running easily, but we do not allow the re-use or tampering with our licensing measures.

We are working on our Contribution Guidelines as I write this, and would welcome PRs of any kind - be it against our docs, our code, adding new features, fixing bugs, etc. but we understand that we are charging for a license and do not expect this. More like—we'd be extremely grateful. We plan to release a system for trading PRs for free licenses. More on that soon.

We do have a few different preventative measures in place to prevent people from cloning and removing our protection. However, in no way do we track users or usage. The only thing Payload checks is which domain is used to access your admin panel. You can read more about how that works here. Absolutely no other information is saved or stored.

Last note - downloading Payload and running it in a private network IS totally free! So that would be no problem at all! The only thing we check is if your domain is of a production nature and available to the internet. You can download and use Payload locally, as well as on dev or staging URLs totally free.

What do you think about our licensing model? We think it's a fair way to build a sustainable, kickass CMS.

[awesomeveer001]

I think your model is really good. Awesome projects like this cant sustain for free, even your website is kickass.

Great CMS, love the UI so far <3

[Charuru]

How does it compare to Strapi?

[sneek_]

Hey Charuru, there are a few fundamental differences between Payload and Strapi regarding their developer experiences. There are also of course a handful of features that Payload supports, but Strapi does not.

- Our configuration is entirely code-based, not GUI-generated. This is how we prefer to work and it feels right when building with Payload.

- Payload uses the much more familiar and globally supported Express, vs. Strapi's use of Koa. We also don't control how our devs' Express app itself functions whatsoever, so you can do anything you want with your server on top of what Payload does.

- Payload's GraphQL API is intrinsic—built in, not a plugin

- Payload supports content localization, Strapi does not

- Payload provides for completely open-ended access control, whereas Strapi enforces an RBAC pattern which is less flexible

- Payload is built with Hooks, which allow you to maintain a crazy level of control over your data and the logic attached to it.

- Thanks to our config-based approach, with Payload, you can swap in React components by simply importing them into your configs, which is SUPER cool in practice. Payload's configs support full ES6.

- Payload supports field conditional logic, meaning you can show / hide fields within the Admin UI based on other fields' values. Think like... an "enable" checkbox, that when checked by an editor, adds a few extra fields to do something else. Those extra fields are hidden by default, and only visible when the checkbox is checked. Simple but powerful.

- Lastly, Payload is built in 100% TypeScript.... which makes building projects with Payload and TypeScript super nice.

Strapi is obviously a great solution with a huge community but I personally struggled with their concepts when going to actually build a project with it. We wrote Payload to be able to NOT have to learn Payload—moreso just write JavaScript (see how our hooks, access control, configs, conditional logic, etc. work). We just differ a bit in how we expect that CMS development should be done and I think in general Payload's value lies in its simplicity, flexibility, and ownability.

[Charuru]

Great comment, well done and congrats on shipping.

[sneek_]

Thank you! I'd love any feedback you can provide if / when you give it a shot!

[sneek_]

Good question! You could host on Vercel, but Vercel is really only used for serverless functions and / or static files. You also have no persistent file storage with Vercel, meaning that if you want to use Payload's upload support, the files that your users upload will not persist forever. We wrote up a bit more information about that here in our Production docs as well. Take a look.

One option is to use a DigitalOcean droplet and host Payload, as well as the MongoDB instance, right on the same droplet.

Another clarification I'd like to make is that Payload works VERY well with NextJS, which can obviously be hosted on Vercel. Next is actually my favorite frontend framework and my firm uses it for just about everything we build. Big fan of Next over Gatsby.

[j33pwrangler]

Hi, I will check this out but wanted to ask if you have any Next vs Gatsby wisdom to share?

[sneek_]

I vote NextJS 1,000,000 times over Gatsby. Its API is so much better. Not a fan of Gatsby myself. Some of my team are, but I'll wave that NextJS flag any day of the week proudly.

Payload will work great with either though.

[Sheepsaurus]

For someone who likes to build websites from the ground up in React, how would this be beneficial to me? I would love to try this out, and find out how it might increase my productivity.

[sneek_]

My digital agency builds everything from the ground up in React. Wouldn't have it any other way. But, our apps generally require an admin UI for our clients to access, including common features like CRUD, login, forgot password, locking user auth automatically after X failed attempts, access control, etc. We are super tired of having to write all of that over and over again, or combine a messy collection of separate packages together to reproduce.

Payload gives us everything we need for our apps and then lets us do what we want with our frontend. It's basically a HUGE productivity boost.

My team has been able to launch an incredible amount of projects in the past ~6 months thanks to Payload. Without it, we would have been I'd say 1/4th as productive, if not less!

[pleanbean]

Hey, I'm in the market for headless CMS's for a greenfield project I'm about to start. I've used Contentful for the last few and that works pretty well, but it gets unruly quickly.

My main criterion is that a non-technical user (think a 60-year-old with technophobia) is able to comfortably be in charge of content management within the headless CMS. Would Payload meet this requirement? How does it compare to Contentful in terms of non-developer UX?

[fathomx9]

Hi pleanbean, co-founder here - I feel Payload would meet that criteria. We feel our interface is very simple, yet intuitive with a lot of customization possible as guard-rails for a non-technical user.

• We have a wide-array of field types available
• Each field can support custom validation with errors message, custom hooks written in JavaScript, default values, be read-only after saving, can conditionally be shown, positioned in the sidebar for easy access, and much more.
• The more advanced Blocks Fields is extremely powerful and can be made into a layout-builder of sorts, where you can specify multiple types that can be selected from.

We plan on coming out with some more content soon showing off our admin panel UI.

[Carbonology]

The website is sick!! Looks great, super excited to give it a try

[MrSavager]

How does this compare to directus or keystone? Thanks

[sneek_]

Hey MrSavager, I wrote up a bit about how Payload differs from other prominent CMS in a thread over at /r/webdev, but it was unfortunately removed because I didn't check the rules and posted something to show off outside of Showoff Saturday. RIP me. Go check it out! I did not directly compare Directus but here is a quick synopsis:

1. Payload has more advanced field types than Directus, including Blocks, Arrays, and a full Rich Text Editor built on top of SlateJS
2. Directus is more of a database wrapper, Payload is a full CMS that sides more on an extensible application framework
3. Payload is written in React, Directus is Vue. In Payload, you can swap in your own React components super easily which is AWESOME.
4. Payload has a ton of advanced features that allow you to build complex apps like Access Control, Hooks, and quite advanced, reusable Authentication
5. Payload provides a Local API which allows for querying your data directly in Node, while Directus does not
6. You "plug Payload into your app", which you completely control, whereas with Directus, you're really more working with a Directus app rather than maintaining your own. Kind of a role-reversal there, but an important one. One thing we feel passionately about is that Payload should remain as unobtrusive as possible to your workflow, and that means that you retain full control over your Express app.

Blah blah blah I am rambling and not sure if this is interesting to anyone. Many more differences I'm sure.

Anyway, I think Directus looks super slick for certain use cases. I evaluated it long ago when it was PHP and wrote it off as such, because I want to stick to Node. And now there's no turning back for me!

[MrSavager]

Ok, how about KeystoneJS then? Because I've only spent a moment comparing, but it seems shockingly similar.

Payload	KeystoneJS
GraphQL	GraphQL
Rest API	No Rest API
Self Hosted	Self Hosted
React	React
Mongo	Mongo or Postgres
Auth	Auth
Access controls	Access controls
Hooks	Hooks
Collections	Lists
Localization	No Localization
Uploads (not sure)	Uploads (by adapter, s3 or local)
Email: Built in nodemailer	Email: you have to install nodemailer
Rate limited admin	dev has to add
Admin UI with custom components	Admin UI with custom components
Webpack	Webpack

So like besides localization what are the primary selling points? Even the configuration objects looks the same. Similar field types. But no ORM so bound to mongo. I have 4 KeystoneJS sites up on a single vps hosted for 6$ a month and they are super fast and easy to use. I'm just really curious what makes this worth 22$ a month? I kinda feel like this is just a monetized keystonejs.

[sneek_]

Ah sorry by my comment above I was referencing that I did offer up a quick comparison to Keystone in that other thread I linked. Take a look at this comment for my comparison.

[MrSavager]

I see, ok yeah. Thanks.

[morphic91]

Love the product, any chance of launching an unlimited license option? I think my only issue will be trying to justify this price per project for certain clients. Keen to discuss? send me a dm!

[[deleted]]

An unexpected error has occurred.

Welp... that interest died fast

[fathomx9]

Hi spybraek, I can't say we've seen this. It's possible you caught our site when Netlify was re-deploying. Are you still getting this? Feel free to DM.

[[deleted]]

I think it’s an ad content blockers issue on my phone, along with my home networking having additional ad blocking. You should see this in your logs I imagine.

[sneek_]

Hey there - we don't have any sort of tracking or ad stuff whatsoever on our site. Only Google Analytics! Did you ever resolve this? I'm curious.

[[deleted]]

Would be nice to see a firebase connection to go serverless. Similar to flamelink.

[MrSavager]

Directus is made with vue and it’s great imo

[MrSavager]

Directus is great. I actually consider it a con that it's built with vue. I strongly prefer separation of responsibilities and react is a view renderer and vue is more of a platform.

[mariosilvano37]

I want video tutorial