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.
`UnpublishButton`	A button that unpublishes the current document. More details.
`PreviewButton`	A button that previews the current document. More details.
`Description`	A description of the Collection. More details.
`Status`	A component that represents the status of the current document. 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.
`UnpublishButton`	A button that unpublishes the current document. More details.
`PreviewButton`	A button that previews the current document. More details.
`Description`	A description of the Global. More details.
`Status`	A component that represents the status of the global. More details.

SaveButton

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

Configuration Path

Collections: admin.components.edit.SaveButton
Globals: admin.components.elements.SaveButton

Example for Collections

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

Example for Globals

1import type { GlobalConfig } from 'payload'
2
3export const Header: GlobalConfig = {
4  slug: 'header',
5  admin: {
6    components: {
7      elements: {
8        SaveButton: '/path/to/CustomSaveButton',
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 { EditMenuItemsClientProps } from 'payload'
7
8export const EditMenuItems = (props: EditMenuItemsClientProps) => {
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 component allows you to render a custom Save Draft Button in the Edit View.

Configuration Path

Collections: admin.components.edit.SaveDraftButton
Globals: admin.components.elements.SaveDraftButton

Example for Collections

1import type { CollectionConfig } from 'payload'
2
3export const Posts: CollectionConfig = {
slug: 'posts',
versions: {
  drafts: true,
},
admin: {
  components: {
    edit: {
      SaveDraftButton: '/path/to/CustomSaveDraftButton',
    },
  },
},
15}

Example for Globals

1import type { GlobalConfig } from 'payload'
2
3export const Header: GlobalConfig = {
slug: 'header',
versions: {
  drafts: true,
},
admin: {
  components: {
    elements: {
      SaveDraftButton: '/path/to/CustomSaveDraftButton',
    },
  },
},
15}

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 component allows you to render a custom Publish Button in the Edit View.

Configuration Path

Collections: admin.components.edit.PublishButton
Globals: admin.components.elements.PublishButton

Example for Collections

1import type { CollectionConfig } from 'payload'
2
3export const Posts: CollectionConfig = {
slug: 'posts',
versions: {
  drafts: true,
},
admin: {
  components: {
    edit: {
      PublishButton: '/path/to/CustomPublishButton',
    },
  },
},
15}

Example for Globals

1import type { GlobalConfig } from 'payload'
2
3export const Header: GlobalConfig = {
slug: 'header',
versions: {
  drafts: true,
},
admin: {
  components: {
    elements: {
      PublishButton: '/path/to/CustomPublishButton',
    },
  },
},
15}

Here's an example of a custom PublishButton component:

Server Component

1import React from 'react'
2import { PublishButton } from '@payloadcms/ui'
3import type { PublishButtonServerProps } 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'
4
5export function MyPublishButton() {
6  return <PublishButton label="Publish" />
7}

UnpublishButton

The UnpublishButton property allows you to render a custom Unpublish Button in the Edit View.

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

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

Here's an example of a custom UnpublishButton component:

Server Component

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

Client Component

1'use client'
2import React from 'react'
3import { UnpublishButton } from '@payloadcms/ui'
4
5export function MyUnpublishButton() {
6  return <UnpublishButton label="Unpublish" />
7}

PreviewButton

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

Configuration Path

Collections: admin.components.edit.PreviewButton
Globals: admin.components.elements.PreviewButton

Example for Collections

1import type { CollectionConfig } from 'payload'
2
3export const Posts: CollectionConfig = {
4  slug: 'posts',
5  admin: {
6    preview: () => 'https://example.com/preview',
7    components: {
8      edit: {
9        PreviewButton: '/path/to/CustomPreviewButton',
10      },
11    },
12  },
13}

Example for Globals

1import type { GlobalConfig } from 'payload'
2
3export const Header: GlobalConfig = {
4  slug: 'header',
5  admin: {
6    preview: () => 'https://example.com/preview',
7    components: {
8      elements: {
9        PreviewButton: '/path/to/CustomPreviewButton',
10      },
11    },
12  },
13}

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}

Status

The Status component displays the document's draft/published state when versioning with drafts is enabled.

Configuration Path

Collections: admin.components.edit.Status
Globals: admin.components.elements.Status

Example for Collections

1import type { CollectionConfig } from 'payload'
2
3export const Posts: CollectionConfig = {
slug: 'posts',
versions: {
  drafts: true,
},
admin: {
  components: {
    edit: {
      Status: '/path/to/CustomStatus',
    },
  },
},
15}

Example for Globals

1import type { GlobalConfig } from 'payload'
2
3export const Header: GlobalConfig = {
slug: 'header',
versions: {
  drafts: true,
},
admin: {
  components: {
    elements: {
      Status: '/path/to/CustomStatus',
    },
  },
},
15}

Upload

The Upload property allows you to render a custom file upload component in the Edit View. This is only available for upload-enabled Collections.

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

1import type { CollectionConfig } from 'payload'
2
3export const Media: CollectionConfig = {
4  slug: 'media',
5  upload: true,
6  admin: {
7    components: {
8      edit: {
9        Upload: '/path/to/MyUploadComponent#MyUploadServer',
10      },
11    },
12  },
13}

Here's an example of a custom Upload component:

Server Component

1import React from 'react'
2import type {
3  PayloadServerReactComponent,
4  SanitizedCollectionConfig,
5} from 'payload'
6import { CustomUploadClient } from './MyUploadComponent.client'
7
8export const MyUploadServer: PayloadServerReactComponent<
9  SanitizedCollectionConfig['admin']['components']['edit']['Upload']
10> = (props) => {
11  return (
12    <div>
13      <h2>Custom Upload Interface</h2>
14      <CustomUploadClient {...props} />
15    </div>
16  )
17}

Client Component

1'use client'
2import React from 'react'
3import { Upload, useDocumentInfo } from '@payloadcms/ui'
4
5export const CustomUploadClient = () => {
6  const { collectionSlug, docConfig, initialState } = useDocumentInfo()
7
8  return (
9    <Upload
10      collectionSlug={collectionSlug}
11      initialState={initialState}
12      uploadConfig={'upload' in docConfig ? docConfig.upload : undefined}
13    />
14  )
15}

For more details on customizing upload components, including examples with custom actions and drawers, see the Upload documentation.

Was this page helpful?

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

Configuration Path

Example for Collections

Example for Globals

Server Component

Client Component

beforeDocumentControls

Collections

Globals

Server Component

Client Component

editMenuItems

Config Example

Server Component

Client Component

SaveDraftButton

Configuration Path

Example for Collections

Example for Globals

Server Component

Client Component

PublishButton

Configuration Path

Example for Collections

Example for Globals

Server Component

Client Component

UnpublishButton

Server Component

Client Component

PreviewButton

Configuration Path

Example for Collections

Example for Globals

Server Component

Client Component

Description

Server Component

Client Component

Status

Configuration Path

Example for Collections

Example for Globals

Upload

Server Component

Client Component

List View