> ## Documentation Index
> Fetch the complete documentation index at: https://docs.frogbot.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Edit View

The Edit View contains the form and controls used to edit one collection document. You can replace the complete view through `admin.components.edit.views.default`, or customize individual slots under `admin.components.edit`.

```ts theme={"theme":"tokyo-night"}
import type { CollectionConfig } from 'frogbot'

export const Posts: CollectionConfig = {
  slug: 'posts',
  admin: {
    components: {
      edit: {
        beforeDocumentControls: ['/components/ReviewState#ReviewState'],
        editMenuItems: ['/components/EditActions#EditActions'],
        SaveButton: '/components/Save#Save',
      },
    },
  },
  fields: [],
}
```

See [Document Views](https://docs.frogbot.ai/custom-components/document-views.md) when replacing the editor or adding document routes and tabs. Every `admin.components.edit` slot is listed in [Edit View Options](https://docs.frogbot.ai/configuration/collections.md#edit-view-options).

### beforeDocumentControls

`beforeDocumentControls` renders before the document action buttons.

```tsx theme={"theme":"tokyo-night"}
import type { BeforeDocumentControlsServerProps } from 'frogbot'

export function ReviewState(_props: BeforeDocumentControlsServerProps) {
  return <span>Editorial review enabled</span>
}
```

### editMenuItems

`editMenuItems` adds actions to the document controls menu. Client components can use FrogBot's dropdown primitives.

```tsx theme={"theme":"tokyo-night"}
'use client'

import type { EditMenuItemsClientProps } from 'frogbot'
import { DropdownMenuItem } from '@frogbotai/ui'
import { useDocumentInfo } from '@frogbotai/ui/admin'

export function EditActions(_props: EditMenuItemsClientProps) {
  const { id } = useDocumentInfo()

  return <DropdownMenuItem asChild><a href={`/review/${id}`}>Open review</a></DropdownMenuItem>
}
```

### SaveButton

`SaveButton` is used when drafts are disabled. Call `submit()` without an override to save the form.

```tsx theme={"theme":"tokyo-night"}
'use client'

import type { SaveButtonClientProps } from 'frogbot'
import { Button } from '@frogbotai/ui'
import { useForm } from '@frogbotai/ui/admin'

export function Save(_props: SaveButtonClientProps) {
  const { submit } = useForm()

  return <Button onClick={() => void submit()}>Save</Button>
}
```

### SaveDraftButton

`SaveDraftButton` is available when drafts are enabled and autosave is disabled. Submit with the draft status.

```tsx theme={"theme":"tokyo-night"}
'use client'

import type { SaveDraftButtonClientProps } from 'frogbot'
import { Button } from '@frogbotai/ui'
import { useForm } from '@frogbotai/ui/admin'

export function SaveDraft(_props: SaveDraftButtonClientProps) {
  const { submit } = useForm()

  return <Button onClick={() => void submit({ overrides: { _status: 'draft' } })}>Save draft</Button>
}
```

### PublishButton

`PublishButton` is available when drafts are enabled. Submit with the published status.

```tsx theme={"theme":"tokyo-night"}
'use client'

import type { PublishButtonClientProps } from 'frogbot'
import { Button } from '@frogbotai/ui'
import { useForm } from '@frogbotai/ui/admin'

export function Publish(_props: PublishButtonClientProps) {
  const { submit } = useForm()

  return <Button onClick={() => void submit({ overrides: { _status: 'published' } })}>Publish</Button>
}
```

### UnpublishButton

`UnpublishButton` returns a published document to draft status.

```tsx theme={"theme":"tokyo-night"}
'use client'

import type { UnpublishButtonClientProps } from 'frogbot'
import { Button } from '@frogbotai/ui'
import { useForm } from '@frogbotai/ui/admin'

export function Unpublish(_props: UnpublishButtonClientProps) {
  const { submit } = useForm()

  return <Button onClick={() => void submit({ overrides: { _status: 'draft' } })}>Unpublish</Button>
}
```

### PreviewButton

`PreviewButton` can use the current document's configured preview URL.

```tsx theme={"theme":"tokyo-night"}
'use client'

import type { PreviewButtonClientProps } from 'frogbot'
import { Button } from '@frogbotai/ui'
import { useDocumentInfo } from '@frogbotai/ui/admin'

export function Preview(_props: PreviewButtonClientProps) {
  const { collectionSlug, id } = useDocumentInfo()

  const openPreview = () => {
    const search = new URLSearchParams({ collection: collectionSlug ?? '', id: String(id ?? '') })

    window.open(`/preview?${search}`, '_blank', 'noopener,noreferrer')
  }

  return <Button onClick={openPreview}>Preview</Button>
}
```

### Description

`Description` replaces the collection description in the Edit and [List Views](https://docs.frogbot.ai/custom-components/list-view.md). Type it with `ViewDescriptionServerProps` or `ViewDescriptionClientProps` from `frogbot`.

### Status

`Status` replaces the draft or published status display when drafts are enabled.

### Upload

`Upload` replaces the upload area for an upload-enabled collection. A custom implementation must integrate with FrogBot's form and upload state; a standalone file input will not submit an upload correctly.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.