> Canonical URL: https://codingcat.dev/podcast/1-17-payload-cms

# Payload CMS

🎧 Podcast Episode · S1E17April 21, 2021

# Payload CMS

![](https://cdn.sanity.io/images/hfh83o0w/production/ca193facbbc516ab21b53ab5bf94d8a48c2d007d-1920x1080.png?w=1920&h=1080&q=82&fit=max&auto=format)[![Alex Patterson](https://cdn.sanity.io/images/hfh83o0w/production/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Dan Ribbens](https://cdn.sanity.io/images/hfh83o0w/production/6697458f84d1b10ce595b451f4f612af5911a79f-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Dan Ribbens](/guest/daniel-ribbens)🎧 Listen & Subscribe[Spotify](https://open.spotify.com/episode/2cQczfuDct1Rk3pDGEOZiG)[Apple](https://podcasts.apple.com/us/podcast/1-17-payload-cms/id1491655542?i=1000518067795)[YouTube](https://www.youtube.com/watch?v=ZJiCMBiCKDY)[Pocket Casts](https://pca.st/episode/19f95a52-9664-4bde-bc39-7bb7aaae03fc)[Castbox](https://castbox.fm/episode/id2508485-id375375467)[Castro](https://castro.fm/episode/K6OHKl)[Overcast](https://overcast.fm/itunes1491655542)[RSS](https://anchor.fm/s/115b203c/podcast/rss)✏️ Visual Architecture Diagram

## how this episode connects together.

Follow AJ from first principles to production-ready architecture.

Let’s build it!✏️ Visual Diagram: Payload CMS✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]Step-by-step diagram breakdown for Payload CMS: start with Dan Ribbens, implement Architecture & Patterns, and ship to production.AAA Contrast Verified

**Payload CMS ** is a CodingCat.dev podcast episode featuring Dan Ribbens alongside Alex Patterson focused on JavaScript, CSS, PHP. We chat with Dan Ribbens about Payload CMS a self-hosted, headless JavaScript CMS. 1.17 - Payload CMS: https://codingcat.dev/podcast/1-17-payload-cms 0:00 - Intro
01:18 - Dan working on Payload CMS
02:20 - Payload CMS JavaScript Stack
02:40 - Wordpress Comparison of Stack
04:45 - Pricing discussion
06:52 - Payload CMS Product Demo
08:50 - Data structure within Payload CMS
10:00 - Showing off the Cod Watch the full video breakdown on [**YouTube**](https://www.youtube.com/watch?v=ZJiCMBiCKDY) or explore the architectural notes, chapters, and official documentation links below.

## Questions

- Payload is a Headless CMS correct?
- How does this differ from WordPress?
- Would you compare Payload CMS to Contentful, or something more like [Sanity.io](https://www.sanity.io/manage?coupon=CodingCatDev) where you are standing up your own environment?
- Is Paylod CMS Open Source?
- What are the JavaScript Technologies used? Node
- Express
- React

- Where would you host Payload? Azure
- Firebase
- AWS
- Netlify
- Vercel

- Does a customer working with Paylod CMS focus on content first? Before something like design?
- Before development?

- How does Paylod CMS fit into Jamstack?Can you build both static and dynamic?

## Technical Overview: Payload CMS

1.17 - Payload CMS: https://codingcat.dev/podcast/1-17-payload-cms 0:00 - Intro
01:18 - Dan working on Payload CMS
02:20 - Payload CMS JavaScript Stack
02:40 - Wordpress Comparison of Stack
04:45 - Pricing discussion
06:52 - Payload CMS Product Demo
08:50 - Data structure within Payload CMS
10:00 - Showing off the Cod

When applying the concepts from **Payload CMS**  in a production codebase, teams working with JavaScript, CSS, PHP, Serverless should align their implementation with the [**MDN JavaScript Reference**](https://developer.mozilla.org/en-US/docs/Web/JavaScript) (ECMAScript specifications, Web APIs, and runtime fundamentals). Structuring your workflow around repeatable patterns, automated verification, and clear separation of concerns helps prevent regressions as your application scales.

### Key Engineering Takeaways

- **Core Topic Focus: ** Practical strategies for JavaScript, CSS, PHP, Serverless covered in "Payload CMS" (We chat with Dan Ribbens about Payload CMS a self-hosted, headless JavaScript CMS.).
- **Production Implementation: ** Combine the architectural patterns demonstrated in this podcast with the official [MDN JavaScript Reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript) for type safety, performance, and long-term maintainability.
- **Hands-On Video Walkthrough: ** Follow along with the live coding demos and discussion on [YouTube (Payload CMS)](https://www.youtube.com/watch?v=ZJiCMBiCKDY) and subscribe to [CodingCat.dev on YouTube](https://www.youtube.com/@CodingCatDev?sub_confirmation=1) for weekly deep dives.

## Video Chapters & Timestamps

Jump directly to any segment of [**Payload CMS**](https://www.youtube.com/watch?v=ZJiCMBiCKDY) on YouTube using the timestamped chapters below:

- [**00:00**](https://www.youtube.com/watch?v=ZJiCMBiCKDY&t=0s): Intro
- [**00:00**](https://www.youtube.com/watch?v=ZJiCMBiCKDY&t=0s): Dan working on Payload CMS
- [**00:00**](https://www.youtube.com/watch?v=ZJiCMBiCKDY&t=0s): Payload CMS JavaScript Stack
- [**00:00**](https://www.youtube.com/watch?v=ZJiCMBiCKDY&t=0s): Wordpress Comparison of Stack
- [**00:00**](https://www.youtube.com/watch?v=ZJiCMBiCKDY&t=0s): Pricing discussion
- [**00:00**](https://www.youtube.com/watch?v=ZJiCMBiCKDY&t=0s): Payload CMS Product Demo
- [**00:00**](https://www.youtube.com/watch?v=ZJiCMBiCKDY&t=0s): Data structure within Payload CMS
- [**00:00**](https://www.youtube.com/watch?v=ZJiCMBiCKDY&t=0s): Showing off the Code
- [**00:00**](https://www.youtube.com/watch?v=ZJiCMBiCKDY&t=0s): Admin UI create collection
- [**00:00**](https://www.youtube.com/watch?v=ZJiCMBiCKDY&t=0s): How Webpack works for Payload CMS
- [**00:00**](https://www.youtube.com/watch?v=ZJiCMBiCKDY&t=0s): Graphql Playground
- [**00:00**](https://www.youtube.com/watch?v=ZJiCMBiCKDY&t=0s): Become SASS product?
- [**00:00**](https://www.youtube.com/watch?v=ZJiCMBiCKDY&t=0s): Where to host Payload CMS
- [**00:00**](https://www.youtube.com/watch?v=ZJiCMBiCKDY&t=0s): Is Payload better for Marketers or Developers?
- [**00:00**](https://www.youtube.com/watch?v=ZJiCMBiCKDY&t=0s): What is the local API
- [**00:00**](https://www.youtube.com/watch?v=ZJiCMBiCKDY&t=0s): Where does Payload CMS fit in Jamstack
- [**00:00**](https://www.youtube.com/watch?v=ZJiCMBiCKDY&t=0s): Payload CMS Scaling
- [**00:00**](https://www.youtube.com/watch?v=ZJiCMBiCKDY&t=0s): Binary Storage and Image Resizing
- [**00:00**](https://www.youtube.com/watch?v=ZJiCMBiCKDY&t=0s): Access Control List Workflow
- [**00:00**](https://www.youtube.com/watch?v=ZJiCMBiCKDY&t=0s): Purrfect Picks

## Resources, Links & Official Documentation

- **Watch on YouTube: ** [Payload CMS Full Video](https://www.youtube.com/watch?v=ZJiCMBiCKDY) (plus [Subscribe to CodingCat.dev](https://www.youtube.com/@CodingCatDev?sub_confirmation=1))
- **Show Pick: ** [Derby Festival Marathon (picked by Alex Patterson)](https://derbyfestivalmarathon.com/)
- **Show Pick: ** [Therabody (picked by Alex Patterson)](https://www.theragun.com/)
- **Show Pick: ** [IndieHackers podcast (picked by Dan Ribbens)](https://www.indiehackers.com/)
- **Show Pick: ** [Hilda on Netflix (picked by Dan Ribbens)](https://www.netflix.com/title/80115346)
- [**Dan Ribbens Guest Profile & Episodes on CodingCat.dev**](/guest/daniel-ribbens)
- [**Dan Ribbens on GitHub**](https://github.com/DanRibbens)
- [**Dan Ribbens Official Website**](https://payloadcms.com)
- [**MDN JavaScript Reference:**](https://developer.mozilla.org/en-US/docs/Web/JavaScript) ECMAScript specifications, Web APIs, and runtime fundamentals
- [**MDN CSS Reference:**](https://developer.mozilla.org/en-US/docs/Web/CSS) Modern layout, Grid, Flexbox, animations, and cascade layers
- [**PHP Official Manual:**](https://www.php.net/manual/en/) Zend Engine runtime, security hardening, and language reference

## Related CodingCat.dev Tutorials & Podcast Episodes

- [**Content Modeling in a Headless CMS vs. Traditional Web CMS**](/post/content-modeling-in-a-headless-cms-vs-a-traditional-webcms): Learn how to model content for Headless CMS
- [**Let's Learn Svelte**](/post/lets-learn-svelte): Embrace the hype. Give Svelte and SvelteKit a try! Learn how to build modern web applications with SvelteKit, a quickly growing framework for generating static ...
- [**Teaching Others to Code Lessons Learned**](/podcast/1-19-teaching-others-to-code-lessons-learned): In this episode we sit down with Prince Wilson and talk about his experience teaching at an in person bootcamp.

## Frequently Asked Questions (FAQ)

### What are the main takeaways from Payload CMS?

We chat with Dan Ribbens about Payload CMS a self-hosted, headless JavaScript CMS. 1.17 - Payload CMS: https://codingcat.dev/podcast/1-17-payload-cms 0:00 - Intro
01:18 - Dan working on Payload CMS
02:20 - Payload CMS JavaScript Stack
02:40 - Wordpress Comparison of Stack
04:45 - Pricing discussion
06:52 - Payload CMS Product Demo
08:50 - Data structure within Payload CMS
10:00 - Showing off the Cod Throughout this podcast, Dan Ribbens breaks down real-world implementation details for JavaScript, CSS, PHP so developers can apply these patterns directly in production.

### How do you implement JavaScript best practices in production?

When adopting JavaScript and CSS in a production stack, start by validating your configuration against the [**MDN JavaScript Reference**](https://developer.mozilla.org/en-US/docs/Web/JavaScript) (ECMAScript specifications, Web APIs, and runtime fundamentals). Focus on incremental adoption, automated testing, and observability so your team can measure performance and developer velocity improvements at each stage.

### Where can I watch the full Payload CMS walkthrough and find related code resources?

You can watch the complete video session for [**Payload CMS**](https://www.youtube.com/watch?v=ZJiCMBiCKDY) on the [**CodingCat.dev YouTube channel**](https://www.youtube.com/@CodingCatDev?sub_confirmation=1). For a deeper dive into JavaScript, check out our related guide: [**Content Modeling in a Headless CMS vs. Traditional Web CMS**](/post/content-modeling-in-a-headless-cms-vs-a-traditional-webcms).

## ✏️ Episode Summary

1.17 - Payload CMS: https://codingcat.dev/podcast/1-17-payload-cms

0:00 - Intro
01:18 - Dan working on Payload CMS
02:20 - Payload CMS JavaScript Stack
02:40 - Wordpress Comparison of Stack
04:45 - Pricing discussion
06:52 - Payload CMS Product Demo
08:50 - Data structure within Payload CMS
10:00 - Showing off the Cod

## episode picks.

### 🐾 Alex Patterson

- [Derby Festival Marathon](https://derbyfestivalmarathon.com/)
- [Therabody](https://www.theragun.com/)

### 🐾 Dan Ribbens

- [IndieHackers podcast](https://www.indiehackers.com/)
- [Hilda on Netflix](https://www.netflix.com/title/80115346)

## recent episodes.

[All Episodes→](/podcasts)[![GenAI for Engineers, What](https://cdn.sanity.io/images/hfh83o0w/production/3e48f44739be2aabf3aaa805e51b3a6328979153-1920x1080.png?w=1920&q=82&fit=max&auto=format)](/podcast/genai-for-engineers-what-s-real-what-s-not-and-what-s-coming)November 19, 2025[AI & MCP Agents](/topic/ai)

### [GenAI for Engineers, What's Real, What's Not and What's Coming](/podcast/genai-for-engineers-what-s-real-what-s-not-and-what-s-coming)

Curious about GenAI for engineers? Learn what's real, what's not, and what's next in AI.

[![Alex Patterson](https://cdn.sanity.io/images/hfh83o0w/production/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Balki Kodarapu](https://cdn.sanity.io/images/hfh83o0w/production/25fd44884e232394eb74b776fcec7e8d13330ca0-1060x794.png?rect=133,0,794,794&w=96&h=96&q=82&fit=max&auto=format)Balki Kodarapu](/guest/balki-kodarapu)[![How OAuth, MCP, and the OpenAI Apps SDK, Power the Next Generation of Interactive AI Experiences (with Stytch & OpenAI)](https://cdn.sanity.io/images/hfh83o0w/production/0beb99900f4c24e284df2dee3e2d740062c6ce96-1920x1080.png?w=1920&q=82&fit=max&auto=format)](/podcast/how-oauth-mcp-and-the-openai-apps-sdk-power-the-next-generation-of-interactive-ai-experiences)November 4, 2025[AI & MCP Agents](/topic/ai)

### [How OAuth, MCP, and the OpenAI Apps SDK, Power the Next Generation of Interactive AI Experiences (with Stytch & OpenAI)](/podcast/how-oauth-mcp-and-the-openai-apps-sdk-power-the-next-generation-of-interactive-ai-experiences)

Curious about OAuth, MCP servers, and building cool ChatGPT apps? Hear from Max of Stytch as we dive deep, break down the tech, and build a Tamagotchi together!

[![Alex Patterson](https://cdn.sanity.io/images/hfh83o0w/production/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Max Gerber](https://cdn.sanity.io/images/hfh83o0w/production/4497bb7ada0e39b4cd13b0e3ca00c930389dab02-1292x1088.png?rect=102,0,1088,1088&w=96&h=96&q=82&fit=max&auto=format)Max Gerber](/guest/max-gerber)