Simplify your stack and build anything. Or everything.
Schedule a Demo
USE CASES
Headless CMSEnterprise App BuilderHeadless E-CommerceDigital Asset Management
FEATURES
Multi-TenancyWhite LabelLocalizationAccess ControlAuth
CASE STUDIES

See what others are building with Payload.

Browse Case Studies
Build tomorrow’s web with a modern solution you truly own.
PAYLOAD IS FOR
DevelopersMarketing teamsEnterprise companiesAgencies & Consultancies
COMPARE PAYLOAD
Payload vs WordPressPayload vs ContentfulPayload vs SanityPayload vs StrapiPayload vs Directus
AGENCY TESTIMONIAL

"Payload has transformed the way our clients manage content. It's an indispensable tool for any modern agency."

Become a PartnerFind a Partner
Code-based nature means you can build on top of it to power anything.
Resources
DocumentationExamplesTemplatesGitHubReleasesBlog
Community
RoadmapDiscordCommunity Help
Payload Cloud

Deploy your entire stack in one place with Payload Cloud.

LoginCloud Pricing
It’s time to take back your content infrastructure.
Schedule a Demo
Enterprise Features
SSOAI Auto-EmbeddingPublishing WorkflowsVisual EditorStatic A/B testingAI features
Customer Stories
MicrosoftASICSBlue OriginHello BelloTekton
Featured Customer Story

Microsoft chose Payload to tell the world about AI.

Read the case studyBrowse all
LoginGet Started

Document Views

Document Views consist of multiple, individual views that together represent any single Collection or Global Document. All Document Views and are scoped under the /collections/:collectionSlug/:id or the /globals/:globalSlug route, respectively.

There are a number of default Document Views, such as the Edit View and API View, but you can also create entirely new views as needed. All Document Views share a layout and can be given their own tab-based navigation, if desired.

To customize Document Views, use the admin.components.views.edit[key] property in your Collection Config or Global Config:

1
import type { CollectionConfig } from 'payload'
2
3
export const MyCollectionOrGlobalConfig: CollectionConfig = {
4
// ...
5
admin: {
6
components: {
7
views: {
8
edit: {
9
default: {
10
Component: '/path/to/MyCustomEditView',
11
},
12
// Other options include:
13
// - root
14
// - api
15
// - versions
16
// - version
17
// - livePreview
18
// - [key: string]
19
// See below for more details
20
},
21
},
22
},
23
},
24
}

Config Options

The following options are available:

Property

Description

root

The Root View overrides all other nested views and routes. No document controls or tabs are rendered when this key is set. More details.

default

The Default View is the primary view in which your document is edited. It is rendered within the "Edit" tab. More details.

versions

The Versions View is used to navigate the version history of a single document. It is rendered within the "Versions" tab. More details.

version

The Version View is used to edit a single version of a document. It is rendered within the "Version" tab. More details.

api

The API View is used to display the REST API JSON response for a given document. It is rendered within the "API" tab.

livePreview

The LivePreview view is used to display the Live Preview interface. It is rendered within the "Live Preview" tab. More details.

[key]

Any other key can be used to add a completely new Document View.

For details on how to build Custom Views, including all available props, see Building Custom Views.

Document Root

The Document Root is mounted on the top-level route for a Document. Setting this property will completely take over the entire Document View layout, including the title, Document Tabs, and all other nested Document Views including the Edit View, API View, etc.

When setting a Document Root, you are responsible for rendering all necessary components and controls, as no document controls or tabs would be rendered. To replace only the Edit View precisely, use the edit.default key instead.

To override the Document Root, use the views.edit.root property in your Collection Config or Global Config:

1
import type { CollectionConfig } from 'payload'
2
3
export const MyCollection: CollectionConfig = {
4
slug: 'my-collection',
5
admin: {
6
components: {
7
views: {
8
edit: {
9
root: {
10
Component: '/path/to/MyCustomRootComponent',
11
},
12
},
13
},
14
},
15
},
16
}

Edit View

The Edit View is where users interact with individual Collection and Global Documents. This is where they can view, edit, and save their content. the Edit View is keyed under the default property in the views.edit object.

For more information on customizing the Edit View, see the Edit View documentation.

Document Tabs

Each Document View can be given a tab for navigation, if desired. Tabs are highly configurable, from as simple as changing the label to swapping out the entire component, they can be modified in any way.

To add or customize tabs in the Document View, use the views.edit.[key].tab property in your Collection Config or Global Config:

1
import type { CollectionConfig } from 'payload'
2
3
export const MyCollection: CollectionConfig = {
4
slug: 'my-collection',
5
admin: {
6
components: {
7
views: {
8
edit: {
9
myCustomTab: {
10
Component: '/path/to/MyCustomTab',
11
path: '/my-custom-tab',
12
tab: {
13
Component: '/path/to/MyCustomTabComponent'
14
}
15
},
16
anotherCustomTab: {
17
Component: '/path/to/AnotherCustomView',
18
path: '/another-custom-view',
19
tab: {
20
label: 'Another Custom View',
21
href: '/another-custom-view',
22
}
23
},
24
},
25
},
26
},
27
},
28
}

The following options are available for tabs:

Property

Description

label

The label to display in the tab.

href

The URL to navigate to when the tab is clicked. This is optional and defaults to the tab's path.

Component

The component to render in the tab. This can be a Server or Client component. More details

Tab Components

If changing the label or href is not enough, you can also replace the entire tab component with your own custom component. This can be done by setting the tab.Component property to the path of your custom component.

Here is an example of how to scaffold a custom Document Tab:

Server Component

1
import React from 'react'
2
import type { DocumentTabServerProps } from 'payload'
3
import { Link } from '@payloadcms/ui'
4
5
export function MyCustomTabComponent(props: DocumentTabServerProps) {
6
return (
7
<Link href="/my-custom-tab">
8
This is a custom Document Tab (Server)
9
</Link>
10
)
11
}

Client Component

1
'use client'
2
import React from 'react'
3
import type { DocumentTabClientProps } from 'payload'
4
import { Link } from '@payloadcms/ui'
5
6
export function MyCustomTabComponent(props: DocumentTabClientProps) {
7
return (
8
<Link href="/my-custom-tab">
9
This is a custom Document Tab (Client)
10
</Link>
11
)
12
}
Next

Edit View