Differences in stack
Payload CMS runs on React for the admin panel and uses MongoDB by default for storing all your data (even though it's flirting with Postgres via a beta adapter)
On the other hand, Directus is using VueJS for the admin panel and SQL-based databases.
Personally, I'm not a fan of Mongo. Not at all. You might criticize my statement, but I never found any case of Mongo beating SQL-based databases.
Advantages of Payload
Code first approach
With Payload, the whole project is configured within the payload.config.ts
file. You create your collections, fields, hooks etc.. directly in your code.
Imagine building a custom e-commerce site. With Payload, you start by coding out your product and user schemas, fully tailoring the CMS to the project's specific needs, without touching the UI.
The DX experience was really smooth.
Full TypeScript support
This is where Payload surprised me. Almost everything is well typed, making it so easy to configure your project. Directus is also typed, but I can guarantee you that the DX with Payload is just way ahead.
Native rich text editor
Payload comes with a rich text editor field built on an "adapter pattern" which means that you can specify which text editor you'd like to use. For now, you can use either SlateJS or the new Lexical (in beta) editor.
In the past, Directus only had a WYSIWYG HTML text editor. Recently they released a Block Editor field that outputs JSON blocks just like Payload. But after testing both of them, Payload is way ahead of Directus on that.
It is natively powerful, and customizing it is so much easier than Directus's Block Editor.
Types generator
Within your Payload project, just run npm run generate:types to generate types based on your config. Just like that, you have a read-to-use Typescript file with your whole project definitions.
Advantages of Directus
Directus outshines Payload by providing a lot of features out-of-the-box.
UI-first approach
With Directus, you can manage your collections, access control and almost everything directly from the dashboard. This means that even non-technical users can easily adjust tables, collections, and fields, making Directus accessible to a wider audience.
Robust & Clean UI
Clearly, the Directus team bet on their product's UI, and they did the job perfectly.
The UI is intuitive, making it easy for anyone to jump in and start managing data, designing layouts, or configuring fields without a steep learning curve. Moreover, multiple views & layouts are supported natively:
- Table - the default view just like Payload
- Calendar - showing a calendar for time-oriented data
- Card - showing a big image for each record with additional information
- Kanban - groups items on columns (like Trello)
- Map - world map with items displayed as points, lines, polygons etc... (this one always impresses me)
Native Websocket support
Directus allows you to connect to your project effortlessly through a WebSocket interface to receive real-time updates on data stored in a collection. This could also be done with Payload by extending it with an Express endpoint though, but it's nice to have it already done by default. Plus, you can use the JS SDK for a smoother experience.
More advanced queries
This is where Directus really outshines Payload.
The fields query parameter allows you to choose the fields that are returned in the current dataset. It supports dot notation and wildcards (*) to request nested fields. A simple example: ?fields=*,relation_field.*,relation_field_2.*.*
Filtering is quite similar to Payload, but it offers much more operators such as _intersects or _intersects_bbox to filter geospatial fields.
Moreover, you have dynamic variables such as $CURRENT_USER
, $CURRENT_ROLE
and $NOW(<adjustment>)
We can also talk about functions that allow you to do on-the-fly operations and calculations, for aggregation or grouping for example.
Geospatial fields
Directus supports GeoJSON fields by default. This allows you to create Points, Lines, Polygons etc... directly from the dashboard, with an easy-to-use interface out-of-the-box.
The work behind that is incredible. If you deal with coordinates in your project, Directus is the perfect match for you.
Revision system
Directus tracks by default every changes you make in your project. You can see the modifications in the dashboard directly from the item page, in the form of a timeline showing who made the change, when, and what exactly changed. Plus, you get an overview of what the data looked like before the change and revert back to it in a click.
This applies to every change, whether it was initiated from the dashboard or through the API.
Native SSO support
Directus supports four standard types of SSO mechanisms: OpenID, OAuth 2.0, LDAP and SAML.
Directus Flows (automation)
Well, this might be classified as a Directus' super feature.
In short, it allows you to run operations based on specific triggers just like Zapier. I can't tell you how much time this feature saved me. Even non-technical people get quickly fluent with this.
Insights
With Insights, you can easily create beautiful charts to visualize your data. From time series to pie charts, feel free to create anything with advanced filtering.
Conclusion
Well, you might have guessed it but Directus clearly wins. But keep in mind that Payload is much more younger: the first official release was in 2021, while the first PHP-based version of Directus, which marked its transition to an open-source project and the foundation for what Directus has become today, was released in 2014.
Let's conclude by how Payload & Directus could be better.
What I wish Directus had
- An alternative way to configure the project, just like Payload CMS does with its code-first approach
- Better Typescript support, developing extensions is quite a pain in the ass sometimes. For example, endpoint extensions doesn't have correct typing in the
req
object (lack of accountability) - A native powerful rich text editor like Payload's
- A native way to generate types, you can leverage the OpenAPI specs but there are some quirks here and there.
What I wish Payload had
- Better queries, just like Directus
- A Javascript SDK, just like Directus' one
- Bi-directional relationship field. This is potentially what could make you avoid Payload. A discussion is already ongoing.
- Native SSO support
- GeoJSON support