Server vs client config

The plugin ships two Puck configurations, because React Server Components can't run the hooks and client-only code the editor needs.

// Server component: use baseConfig
import { baseConfig } from '@delmaredigital/payload-puck/config'
<PageRenderer config={baseConfig} data={page.puckData} />

// PuckConfigProvider: use editorConfig
import { editorConfig } from '@delmaredigital/payload-puck/config/editor'
<PuckConfigProvider config={editorConfig}>

Both contain the same components under the same keys. The editor versions add client-only behaviour, such as the TipTap rich text editor for RichText and the Accordion's open/close state.

PresetsCopy Anchor Link

/config/editor also exports presets to extend:

• fullConfig: every built-in component, in Layout, Typography, Media and Interactive categories.
• minimalConfig: Section, Heading, Text, Image and Button only.
• defaultRoot and pageTreeRoot: root configurations. pageTreeRoot replaces the locked slug field with a folder picker, a page segment field and a slug preview, for use with page-tree.

import { extendConfig, fullConfig, pageTreeRoot } from '@delmaredigital/payload-puck/config/editor'

export const puckConfig = extendConfig({
  base: fullConfig,
  root: pageTreeRoot,
})

On the server side, createConfig(layouts) from /config builds a render config whose page-layout options come from your layouts; baseConfig is createConfig(DEFAULT_LAYOUTS).

Your own componentsCopy Anchor Link

A custom component needs the same split: an editor version with fields and interactivity, and a server version with no hooks and no 'use client'. See Server and editor variants.