Edit View

The Edit View is where users interact with individual Collection and Global Documents within the Admin Panel. The Edit View contains the actual form that submits the data to the server. This is where they can view, edit, and save their content. It contains controls for saving, publishing, and previewing the document, all of which can be customized to a high degree.

The Edit View can be swapped out in its entirety for a Custom View, or it can be injected with a number of Custom Components to add additional functionality or presentational elements without replacing the entire view.

Custom Edit View

To swap out the entire Edit View with a Custom View, use the views.edit.default property in your Collection Config or Global Config:

1import { buildConfig } from 'payload'
2
3const config = buildConfig({
// ...
admin: {
  components: {
    views: {
      edit: {
        default: {
          Component: '/path/to/MyCustomEditViewComponent',
        },
      },
    },
  },
},
16})

Here is an example of a custom Edit View:

Server Component

1import React from 'react'
2import type { DocumentViewServerProps } from 'payload'
3
4export function MyCustomServerEditView(props: DocumentViewServerProps) {
5  return <div>This is a custom Edit View (Server)</div>
6}

Client Component

1'use client'
2import React from 'react'
3import type { DocumentViewClientProps } from 'payload'
4
5export function MyCustomClientEditView(props: DocumentViewClientProps) {
6  return <div>This is a custom Edit View (Client)</div>
7}

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

Custom Components

In addition to swapping out the entire Edit View with a Custom View, you can also override individual components. This allows you to customize specific parts of the Edit View without swapping out the entire view.

Collections

To override Edit View components for a Collection, use the admin.components.edit property in your Collection Config:

1import type { CollectionConfig } from 'payload'
2
3export const MyCollection: CollectionConfig = {
4  // ...
5  admin: {
6    components: {
7      edit: {
8        // ...
9      },
10    },
11  },
12}

The following options are available:

Path	Description
`beforeDocumentControls`	Inject custom components before the Save / Publish buttons. More details.
`editMenuItems`	Inject custom components within the 3-dot menu dropdown located in the document control bar. More details.
`SaveButton`	A button that saves the current document. More details.
`SaveDraftButton`	A button that saves the current document as a draft. More details.
`PublishButton`	A button that publishes the current document. More details.
`PreviewButton`	A button that previews the current document. More details.
`Description`	A description of the Collection. More details.
`Upload`	A file upload component. More details.

Globals

To override Edit View components for Globals, use the admin.components.elements property in your Global Config:

1import type { GlobalConfig } from 'payload'
2
3export const MyGlobal: GlobalConfig = {
4  // ...
5  admin: {
6    components: {
7      elements: {
8        // ...
9      },
10    },
11  },
12}

The following options are available:

Path	Description
`beforeDocumentControls`	Inject custom components before the Save / Publish buttons. More details.
`editMenuItems`	Inject custom components within the 3-dot menu dropdown located in the document control bar. More details.
`SaveButton`	A button that saves the current document. More details.
`SaveDraftButton`	A button that saves the current document as a draft. More details.
`PublishButton`	A button that publishes the current document. More details.
`PreviewButton`	A button that previews the current document. More details.
`Description`	A description of the Global. More details.

SaveButton

The SaveButton property allows you to render a custom Save Button in the Edit View.

To add a SaveButton component, use the components.edit.SaveButton property in your Collection Config or components.elements.SaveButton in your Global Config:

1import type { CollectionConfig } from 'payload'
2
3export const MyCollection: CollectionConfig = {
4  // ...
5  admin: {
6    components: {
7      edit: {
8        SaveButton: '/path/to/MySaveButton',
9      },
10    },
11  },
12}

Here's an example of a custom SaveButton component:

Server Component

1import React from 'react'
2import { SaveButton } from '@payloadcms/ui'
3import type { SaveButtonServerProps } from 'payload'
4
5export function MySaveButton(props: SaveButtonServerProps) {
6  return <SaveButton label="Save" />
7}

Client Component

1'use client'
2import React from 'react'
3import { SaveButton } from '@payloadcms/ui'
4import type { SaveButtonClientProps } from 'payload'
5
6export function MySaveButton(props: SaveButtonClientProps) {
7  return <SaveButton label="Save" />
8}

beforeDocumentControls

The beforeDocumentControls property allows you to render custom components just before the default document action buttons (like Save, Publish, or Preview). This is useful for injecting custom buttons, status indicators, or any other UI elements before the built-in controls.

To add beforeDocumentControls components, use the components.edit.beforeDocumentControls property in your Collection Config or components.elements.beforeDocumentControls in your Global Config:

Collections

1export const MyCollection: CollectionConfig = {
admin: {
  components: {
    edit: {
      beforeDocumentControls: ['/path/to/CustomComponent'],
    },
  },
},
9}

Globals

1export const MyGlobal: GlobalConfig = {
admin: {
  components: {
    elements: {
      beforeDocumentControls: ['/path/to/CustomComponent'],
    },
  },
},
9}

Here's an example of a custom beforeDocumentControls component:

Server Component

1import React from 'react'
2import type { BeforeDocumentControlsServerProps } from 'payload'
3
4export function MyCustomDocumentControlButton(
5  props: BeforeDocumentControlsServerProps,
6) {
7  return <div>This is a custom beforeDocumentControl button (Server)</div>
8}

Client Component

1'use client'
2import React from 'react'
3import type { BeforeDocumentControlsClientProps } from 'payload'
4
5export function MyCustomDocumentControlButton(
6  props: BeforeDocumentControlsClientProps,
7) {
8  return <div>This is a custom beforeDocumentControl button (Client)</div>
9}

editMenuItems

The editMenuItems property allows you to inject custom components into the 3-dot menu dropdown located in the document controls bar. This dropdown contains default options including Create New, Duplicate, Delete, and other options when additional features are enabled. Any custom components you add will appear below these default items.

To add editMenuItems, use the components.edit.editMenuItems property in your Collection Config:

Config Example

1import type { CollectionConfig } from 'payload'
2
3export const Pages: CollectionConfig = {
4  slug: 'pages',
5  admin: {
6    components: {
7      edit: {
8        editMenuItems: ['/path/to/CustomEditMenuItem'],
9      },
10    },
11  },
12}

Here's an example of a custom editMenuItems component:

Server Component

1import React from 'react'
2
3import type { EditMenuItemsServerProps } from 'payload'
4
5export const EditMenuItems = async (props: EditMenuItemsServerProps) => {
6  const href = `/custom-action?id=${props.id}`
7
8  return (
9    <>
10      <a href={href}>Custom Edit Menu Item</a>
11      <a href={href}>
12        Another Custom Edit Menu Item - add as many as you need!
13      </a>
14    </>
15  )
16}

Client Component

1'use client'
2
3import React from 'react'
4import { PopupList } from '@payloadcms/ui'
5
6import type { EditViewMenuItemClientProps } from 'payload'
7
8export const EditMenuItems = (props: EditViewMenuItemClientProps) => {
9  const handleClick = () => {
10    console.log('Custom button clicked!')
11  }
12
13  return (
14    <PopupList.ButtonGroup>
15      <PopupList.Button onClick={handleClick}>
16        Custom Edit Menu Item
17      </PopupList.Button>
18      <PopupList.Button onClick={handleClick}>
19        Another Custom Edit Menu Item - add as many as you need!
20      </PopupList.Button>
21    </PopupList.ButtonGroup>
22  )
23}

SaveDraftButton

The SaveDraftButton property allows you to render a custom Save Draft Button in the Edit View.

To add a SaveDraftButton component, use the components.edit.SaveDraftButton property in your Collection Config or components.elements.SaveDraftButton in your Global Config:

1import type { CollectionConfig } from 'payload'
2
3export const MyCollection: CollectionConfig = {
4  // ...
5  admin: {
6    components: {
7      edit: {
8        SaveDraftButton: '/path/to/MySaveDraftButton',
9      },
10    },
11  },
12}

Here's an example of a custom SaveDraftButton component:

Server Component

1import React from 'react'
2import { SaveDraftButton } from '@payloadcms/ui'
3import type { SaveDraftButtonServerProps } from 'payload'
4
5export function MySaveDraftButton(props: SaveDraftButtonServerProps) {
6  return <SaveDraftButton />
7}

Client Component

1'use client'
2import React from 'react'
3import { SaveDraftButton } from '@payloadcms/ui'
4import type { SaveDraftButtonClientProps } from 'payload'
5
6export function MySaveDraftButton(props: SaveDraftButtonClientProps) {
7  return <SaveDraftButton />
8}

PublishButton

The PublishButton property allows you to render a custom Publish Button in the Edit View.

To add a PublishButton component, use the components.edit.PublishButton property in your Collection Config or components.elements.PublishButton in your Global Config:

1import type { CollectionConfig } from 'payload'
2
3export const MyCollection: CollectionConfig = {
4  // ...
5  admin: {
6    components: {
7      edit: {
8        PublishButton: '/path/to/MyPublishButton',
9      },
10    },
11  },
12}

Here's an example of a custom PublishButton component:

Server Component

1import React from 'react'
2import { PublishButton } from '@payloadcms/ui'
3import type { PublishButtonClientProps } from 'payload'
4
5export function MyPublishButton(props: PublishButtonServerProps) {
6  return <PublishButton label="Publish" />
7}

Client Component

1'use client'
2import React from 'react'
3import { PublishButton } from '@payloadcms/ui'
4import type { PublishButtonClientProps } from 'payload'
5
6export function MyPublishButton(props: PublishButtonClientProps) {
7  return <PublishButton label="Publish" />
8}

PreviewButton

The PreviewButton property allows you to render a custom Preview Button in the Edit View.

To add a PreviewButton component, use the components.edit.PreviewButton property in your Collection Config or components.elements.PreviewButton in your Global Config:

1import type { CollectionConfig } from 'payload'
2
3export const MyCollection: CollectionConfig = {
4  // ...
5  admin: {
6    components: {
7      edit: {
8        PreviewButton: '/path/to/MyPreviewButton',
9      },
10    },
11  },
12}

Here's an example of a custom PreviewButton component:

Server Component

1import React from 'react'
2import { PreviewButton } from '@payloadcms/ui'
3import type { PreviewButtonServerProps } from 'payload'
4
5export function MyPreviewButton(props: PreviewButtonServerProps) {
6  return <PreviewButton />
7}

Client Component

1'use client'
2import React from 'react'
3import { PreviewButton } from '@payloadcms/ui'
4import type { PreviewButtonClientProps } from 'payload'
5
6export function MyPreviewButton(props: PreviewButtonClientProps) {
7  return <PreviewButton />
8}

Description

The Description property allows you to render a custom description of the Collection or Global in the Edit View.

To add a Description component, use the components.edit.Description property in your Collection Config or components.elements.Description in your Global Config:

1import type { CollectionConfig } from 'payload'
2
3export const MyCollection: CollectionConfig = {
4  // ...
5  admin: {
6    components: {
7      Description: '/path/to/MyDescriptionComponent',
8    },
9  },
10}

Here's an example of a custom Description component:

Server Component

1import React from 'react'
2import type { ViewDescriptionServerProps } from 'payload'
3
4export function MyDescriptionComponent(props: ViewDescriptionServerProps) {
5  return <div>This is a custom description component (Server)</div>
6}

Client Component

1'use client'
2import React from 'react'
3import type { ViewDescriptionClientProps } from 'payload'
4
5export function MyDescriptionComponent(props: ViewDescriptionClientProps) {
6  return <div>This is a custom description component (Client)</div>
7}

Upload

The Upload property allows you to render a custom file upload component in the Edit View.

To add an Upload component, use the components.edit.Upload property in your Collection Config:

1import type { CollectionConfig } from 'payload'
2
3export const MyCollection: CollectionConfig = {
4  // ...
5  admin: {
6    components: {
7      edit: {
8        Upload: '/path/to/MyUploadComponent',
9      },
10    },
11  },
12}

Here's an example of a custom Upload component:

1import React from 'react'
2
3export function MyUploadComponent() {
4  return <input type="file" />
5}

See what others are building with Payload.

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

Get the resources you need to start building today

Microsoft chose Payload to tell the world about AI.

Edit View

Custom Edit View

Server Component

Client Component

Custom Components

Collections

Globals

SaveButton

Server Component

Client Component

beforeDocumentControls

Collections

Globals

Server Component

Client Component

editMenuItems

Config Example

Server Component

Client Component

SaveDraftButton

Server Component

Client Component

PublishButton

Server Component

Client Component

PreviewButton

Server Component

Client Component

Description

Server Component

Client Component

Upload

List View