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 in which 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 (
6    <div>
7      This is a custom Edit View (Server)
8    </div>
9  )
10}

Client Component

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

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
`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
`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 (
7    <SaveButton label="Save" />
8  )
9}

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 (
8    <SaveButton label="Save" />
9  )
10}

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 (
7    <SaveDraftButton />
8  )
9}

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 (
8    <SaveDraftButton />
9  )
10}

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 (
7    <PublishButton label="Publish" />
8  )
9}

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 (
8    <PublishButton label="Publish" />
9  )
10}

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 (
7    <PreviewButton />
8  )
9}

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 (
8    <PreviewButton />
9  )
10}

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 (
6    <div>
7      This is a custom description component (Server)
8    </div>
9  )
10}

Client Component

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

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 (
5    <input type="file" />
6  )
7}

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."

Deploy your entire stack in one place with Payload Cloud.

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

SaveDraftButton

Server Component

Client Component

PublishButton

Server Component

Client Component

PreviewButton

Server Component

Client Component

Description

Server Component

Client Component

Upload

List View