Payload CMS: The Open-Source CMS Living Inside Next.js — Now Part of Figma

Payload CMS: The Open-Source CMS That Lives Inside Next.js — Now Part of Figma

In April 2026, Figma announced the acquisition of Payload CMS — a move that dissolves the boundaries between design tools and content management for good. But what makes Payload special enough for a design giant like Figma to acquire it? And what does this mean for marketing teams looking for a future-proof CMS?

---

What Is Payload CMS?

Payload is an open-source, TypeScript-native headless CMS that fundamentally differs from Contentful, Sanity, or Strapi: it lives directly inside your Next.js app — not alongside it, not as a separate service, but as part of your codebase.

npx create-payload-app

One single command gives you a complete CMS with admin panel, API layer, and database connectivity — all within your existing Next.js project.

Architecture Comparison

---

Why Payload Is Different: Code-First, Content-First

1. Schema Definition in Code

Instead of clicking fields together in a GUI, you define your content models in TypeScript:

// collections/BlogPosts.ts
import { CollectionConfig } from 'payload'

export const BlogPosts: CollectionConfig = {
  slug: 'blog-posts',
  admin: {
    useAsTitle: 'title',
  },
  fields: [
    { name: 'title', type: 'text', required: true },
    { name: 'content', type: 'richText' },
    { name: 'author', type: 'relationship', relationTo: 'authors' },
    { name: 'publishedAt', type: 'date' },
    { name: 'status', type: 'select', options: ['draft', 'published'] },
  ],
}

Benefit: Your content models are versioned, reviewable, and part of the CI/CD process — no more "who deleted that field?" drama.

2. No Separate API Layer

Since Payload lives inside Next.js, you can load content directly in Server Components:

// app/blog/[slug]/page.tsx
import { getPayload } from 'payload'

export default async function BlogPost({ params }) {
  const payload = await getPayload({ config })
  const post = await payload.find({
    collection: 'blog-posts',
    where: { slug: { equals: params.slug } },
  })
  
  return <article>{post.docs[0].content}</article>
}

No REST API calls, no GraphQL setup, no latency from external services.

3. Visual Editing with Live Preview

Payload 3.0 ships with a Visual Editor that shows content changes in real-time on the live site. Editors can click directly on the page and edit — without leaving the admin panel.

4. RAG & Vector Embeddings — AI-Ready Out of the Box

A feature no other CMS offers: Payload automatically generates Vector Embeddings of your content. This means:

• Semantic search across all content
• RAG-capable chatbots based on your own content
• Personalization through contextual content recommendations

---

Figma + Payload: Why This Acquisition Changes Everything

On April 10, 2026, Figma announced the acquisition of Payload CMS. The strategic logic:

Design-to-Production Pipeline

The vision: Designers create layouts in Figma that automatically become Payload collections. Content teams fill the structure. Developers deploy — all in one pipeline.

What This Means for Marketing Teams

1. No vendor lock-in: Payload is MIT-licensed — your content is yours, your database is yours
2. Reduced tool silos: Design, content, and code in one workflow
3. Enterprise-ready: Microsoft, US Air Force, and Bugatti already use Payload
4. Cost savings: No $300/month SaaS subscription for a CMS you can self-host

---

Payload vs. Competition: Headless CMS Market 2026

Contentful (SaaS Leader)

• Strengths: Mature ecosystem, strong API, large partner network
• Weaknesses: Expensive (Enterprise from $750/mo), vendor lock-in, no own database
• Verdict: Good for enterprises that don't want to self-host — but increasingly under pressure

Strapi (Open-Source Veteran)

• Strengths: Large community, plugin ecosystem, self-hosted
• Weaknesses: No native visual editor, no framework integration, v5 still stabilizing
• Verdict: Solid choice, but Payload is significantly ahead in developer experience

Sanity (Content Lake)

• Strengths: Flexible data structure, good real-time collaboration, GROQ query language
• Weaknesses: Proprietary infrastructure, pricing scales poorly, learning curve
• Verdict: Strong for editorial teams, but expensive at scale

Payload (The New Standard?)

• Strengths: Next.js-native, TypeScript-first, MIT license, AI features, Figma backing
• Weaknesses: Next.js only (no Remix, Astro, etc.), self-hosting requires DevOps know-how
• Verdict: The strongest candidate for teams using Next.js who want control over their infrastructure

---

Practical Example: Payload for a Marketing Website

Step 1: Set Up Project

npx create-payload-app@latest my-marketing-site
# Choose: Next.js + PostgreSQL

Step 2: Landing Pages as Collection

export const LandingPages: CollectionConfig = {
  slug: 'landing-pages',
  fields: [
    { name: 'title', type: 'text', required: true },
    { name: 'hero', type: 'group', fields: [
      { name: 'headline', type: 'text' },
      { name: 'subline', type: 'textarea' },
      { name: 'cta', type: 'text' },
      { name: 'image', type: 'upload', relationTo: 'media' },
    ]},
    { name: 'sections', type: 'blocks', blocks: [
      TestimonialBlock,
      FeatureGridBlock,
      CTABlock,
    ]},
    { name: 'seo', type: 'group', fields: [
      { name: 'metaTitle', type: 'text' },
      { name: 'metaDescription', type: 'textarea' },
      { name: 'ogImage', type: 'upload', relationTo: 'media' },
    ]},
  ],
}

Step 3: Deploy to Vercel

Payload runs on Vercel, Railway, Docker, or any Node.js host. Since it's a Next.js app, vercel deploy works out-of-the-box.

---

Who Already Uses Payload?

---

Conclusion: Is Payload the CMS of the Future?

Payload CMS strikes a nerve. In a world where marketing teams need more content, more personalization, and more speed simultaneously, it offers an architecture designed exactly for that:

1. Developer Experience: TypeScript-native, code-first, no black box
2. Marketer Experience: Visual editor, live preview, intuitive admin UI
3. AI Readiness: RAG & vector embeddings out-of-the-box
4. Ownership: MIT license, own database, no vendor lock-in
5. Figma Integration: Design-to-production pipeline in sight

For marketing teams using Next.js (or planning to), there's currently no better CMS. The Figma deal makes Payload even more relevant — and could reorder the entire headless CMS market.

---

Further Resources

• Payload CMS – Official Website
• Payload 3.0 Announcement
• Figma Acquires Payload
• Payload on GitHub (30k+ Stars)
• Headless CMS Comparison 2026 – Dev.to