Page tree

When @delmaredigital/payload-page-tree is active on your pages collection, the plugin adds folder management to the Puck sidebar. Pages get their address from a folder path plus their own segment.

How it worksCopy Anchor Link

The plugin checks whether your collection has a pageSegment field, page-tree's signature. When it finds one, the editor shows:

1. Folder picker: choose a folder from the hierarchy.
2. Page segment: edit the page's URL segment.
3. Slug preview: see the computed slug (folder path plus segment).

Plugin configurationCopy Anchor Link

You usually don't configure anything. Set pageTreeIntegration only to turn the integration off or to match field names you changed in page-tree:

import { createPuckPlugin } from '@delmaredigital/payload-puck/plugin'

export const autoDetected = createPuckPlugin({})

Or explicitly enable it and set field names:

import { createPuckPlugin } from '@delmaredigital/payload-puck/plugin'

export const explicitlyEnabled = createPuckPlugin({
  pageTreeIntegration: {
    folderSlug: 'payload-folders',
    pageSegmentFieldName: 'pageSegment',
  },
})

Or disable it:

import { createPuckPlugin } from '@delmaredigital/payload-puck/plugin'

export const disabled = createPuckPlugin({ pageTreeIntegration: false })

pageTreeIntegration: true enables the integration with these defaults.

Plugin orderCopy Anchor Link

When the plugin generates the pages collection (autoGenerateCollection: true, the default), list it before page-tree. Page-tree checks its configured collections when it initializes. If Puck hasn't created the collection yet, page-tree doesn't see it and skips adding its fields (folder relationships, slug generation and so on).

import { createPuckPlugin } from '@delmaredigital/payload-puck/plugin'
import { pageTreePlugin } from '@delmaredigital/payload-page-tree'

export const plugins = [
  createPuckPlugin({ pagesCollection: 'pages' }),
  pageTreePlugin({ collections: ['pages'] }),
]

Reversing this order means page-tree runs before Puck creates Pages and skips it.

If you define the collection yourself (autoGenerateCollection: false), order doesn't matter, because the collection already exists in your config:

import { createPuckPlugin } from '@delmaredigital/payload-puck/plugin'
import { pageTreePlugin } from '@delmaredigital/payload-page-tree'

// Add these to a config that already includes your Pages collection.
export const plugins = [
  pageTreePlugin({ collections: ['pages'] }),
  createPuckPlugin({ pagesCollection: 'pages', autoGenerateCollection: false }),
]

Custom editor UICopy Anchor Link

Outside the Payload admin, turn the fields on with the hasPageTree prop on PuckEditor:

import { PuckEditor } from '@delmaredigital/payload-puck/client'
import { editorConfig } from '@delmaredigital/payload-puck/config/editor'

<PuckEditor
  config={editorConfig}
  pageId={page.id}
  initialData={page.puckData}
  pageTitle={page.title}
  pageSlug={page.slug}
  apiEndpoint="/api/puck/pages"
  hasPageTree={true}
  folder={page.folder}
  pageSegment={page.pageSegment}
/>

/client also exports injectPageTreeFields, detectPageTree and hasPageTreeFields, and /config/editor exports pageTreeRoot, a root config with the folder picker, page segment and slug preview fields.