Introducing TanStack support

Developers are building with more frameworks than ever, and Payload should offer the flexibility to meet them wherever they work. Payload 3.0 brought Payload and Next.js together, but the plan was never to support Next.js exclusively.

With 4.0, we're introducing a new framework adapter pattern that separates framework-specific functionality from Payload's core, including admin rendering, React Server Components, loaders, and API mounting.

The first major milestone is support for TanStack Start, giving you more freedom to choose the framework that best fits your project without changing how you actually work with Payload. This is an important step toward making Payload truly framework-agnostic, without compromising the developer experience.

Wholesale refresh of the styling of Payload fields with stronger consistency, including updated Lexical interaction styling.

A redesigned Payload UI

For the first time, we're introducing a major redesign of the admin panel.

With Payload now powering the backend for Figma Make apps, the admin panel needs to support a broader range of users and workflows while remaining flexible and approachable for the open-source community.

Payload 4.0 introduces a redesigned Admin Panel built on a new design system based on Figma's, bringing greater consistency, improved usability, and extensibility across the experience.

The new design system introduces unified tokens for color, typography, spacing, radius, and elevation, and creates more predictable layout patterns throughout the Admin Panel. We've also rethought navigation with a more scalable sidebar that makes core areas easier to find and custom extensions easier to integrate. This includes tabs for customizable organization and improved support for more advanced content structures, such as hierarchies, folders, and tags (more on that in a minute).

Accessibility is also a core part of this foundation, with improved defaults for focus, contrast, keyboard navigation, and ARIA patterns. We are readying WCAG 2.2 AA for a stable release, though it is a work-in-progress toward that goal.

Beyond the visual improvements, the redesign makes it easier for developers to customize and extend the admin panel with token-first styling, which will make custom interfaces easier to maintain.

Hierarchies introduce new workflows, including the ability to create new folders from both the collection view as well as the sidebar

Hierarchies are now a core primitive

Payload has long supported nested content through the nested docs plugin, but the need for hierarchical organization has grown well beyond page trees and nested URLs.

With Payload 4.0, hierarchies are now built directly into Payload core, providing a flexible foundation for folders, tags, taxonomies, nested content structures, and tree-based organization. A big shoutout to our incredible community for helping us shape this implementation!

This opens up new options for how developers structure content and how teams navigate it. For example, teams managing large content or asset libraries can organize documents into hierarchies, filter by folders or tags, and view related content across collections. And because the redesigned admin panel introduces a more flexible sidebar, it provides greater control over how editors can navigate and organize that content.

Over time, this new foundation will replace the nested docs plugin while enabling more sophisticated content organization and management workflows.

Powerful digital asset management

Many teams already use Payload to manage large libraries of images, PDFs, videos, and other files. With Payload 4.0, we're introducing new digital asset management capabilities that make those libraries easier to navigate, organize, and maintain.

Building on the new hierarchy primitives, the admin panel introduces richer asset management experiences, including larger previews, grid views, image size variants, PDF previews, and video playback.

We're also improving how files are uploaded and retained. Users can now paste files or file URLs directly from their clipboard, while expanded file versioning preserves references to stored files across document versions.

When image processing generates a modified image, Payload now retains the original source file.

These improvements bring Payload closer to the experience of a first-class digital asset management platform, while keeping assets connected to the content, workflows, and applications they're used in.

Support for localized files and additional versioning capabilities is also planned.

Better MCP and agent workflows

Payload's TypeScript-first architecture makes it a natural fit for AI-assisted development. With 4.0, we're making it easier for agents to understand, interact with, and build on Payload.

We've rebuilt our MCP integration to work out of the box with significantly less configuration. Tools are now enabled by default, local development no longer requires an API key, and improved schema handling makes it easier for agents to discover content structures, query and update documents, and manage uploads.

Project-specific instructions can also be defined at the collection or global level, giving agents additional context about content structures, requirements, and workflows. These instructions can be managed through configuration or directly in the admin panel.

We're also continuing to improve Payload skills, giving coding agents more reliable, Payload-specific implementation guidance.

Get started

Give it a try now: npx create-payload-app@beta. Check out Payload's Github release page and follow our 3.0 to 4.0 migration guide.

We're also not done yet. There's even more to come shortly, and we'd love your feedback as we continue building toward the full 4.0 release. In the meantime, drop us your feedback on Discord and GitHub.