Extending configs
Add your own components to the built-in Puck configs with extendConfig, and supply the result through PuckConfigProvider.
extendConfig() (also exported as mergeConfigs()) adds your components and categories to a built-in configuration, and can remove built-in components you don't want.
import { extendConfig, fullConfig } from '@delmaredigital/payload-puck/config/editor'
import { HeroConfig } from './components/Hero'
export const puckConfig = extendConfig({
base: fullConfig,
components: {
Hero: HeroConfig,
},
categories: {
custom: { title: 'Custom', components: ['Hero'] },
},
})Use fullConfig (or editorConfig) from /config/editor as the base for the editor. For server-side rendering, extend baseConfig from /config, which exports extendConfig too, with your components' server variants.
Options
Prop
Type
Built-in components carry a tabbed sidebar layout. A config you build by spreading a built-in one keeps that layout, and fields you add appear in the first tab. To place them yourself, set your own renderFields with createFieldLayout(), or renderFields: undefined for Puck's default flat list.
Supplying the custom config
Pass the extended config, and your layouts if you have them, to PuckConfigProvider:
'use client'
import { PuckConfigProvider } from '@delmaredigital/payload-puck/client'
import { puckConfig } from '@/puck/config.editor'
import { siteLayouts } from '@/lib/puck-layouts'
export default function PuckProvider({ children }: { children: React.ReactNode }) {
return (
<PuckConfigProvider config={puckConfig} layouts={siteLayouts}>
{children}
</PuckConfigProvider>
)
}For the Payload admin, register the provider in your Payload config:
export default buildConfig({
admin: {
components: {
providers: ['@/components/admin/PuckProvider'],
},
},
// ...
})Then render with a matching server config, built the same way from baseConfig, so every component key in the saved data has a renderer:
import { extendConfig, baseConfig } from '@delmaredigital/payload-puck/config'
import { HeroServerConfig } from './components/Hero.server'
export const renderConfig = extendConfig({
base: baseConfig,
components: { Hero: HeroServerConfig },
})