Payload User Generated Fields Plugin

A Payload CMS plugin that lets admins define dynamic field configurations in one collection and capture user-entered values in another.

Install

bun add payload-user-generated-fields-plugin

Usage

Add the plugin to your payload.config.ts:

import { buildConfig } from 'payload'
import { pluginUserGeneratedFields } from 'payload-user-generated-fields-plugin'

export default buildConfig({
  collections: [
    {
      slug: 'post-categories',
      fields: [{ name: 'title', type: 'text' }],
    },
    {
      slug: 'posts',
      fields: [{ name: 'postTitle', type: 'text', required: true }],
    },
  ],
  plugins: [
    pluginUserGeneratedFields({
      collections: [
        {
          configCollection: {
            slug: 'post-categories',
          },
          valuesCollection: {
            slug: 'posts',
            groupName: 'Post Category Fields',
            relationshipFieldName: 'post-categories',
            useDefaultRelationshipField: true,
          },
        },
      ],
      debug: false,
    }),
  ],
})

How It Works

• The plugin augments the configCollection with:
  • a blocks field (customFieldsOptions by default) for defining dynamic form fields
  • a hidden JSON field (customFieldsConfig by default) that stores normalized configuration
• The plugin augments the valuesCollection with:
  • a relationship field to the config collection (optional if you provide your own relationship)
  • a group containing:
    • hidden config storage JSON
    • hidden values JSON rendered through a custom admin field component

Configuration

The plugin accepts:

• collections: array of config/values collection pair definitions
• debug: enables internal hidden JSON field visibility and debug logs

For exported config/types:

• main plugin: payload-user-generated-fields-plugin
• RSC export: payload-user-generated-fields-plugin/rsc
• client export: payload-user-generated-fields-plugin/client
• types export: payload-user-generated-fields-plugin/types

Local Development

1. Copy dev/.env.example to dev/.env and update values.
2. Install dependencies:

bun install

3. Start the dev app:

bun run dev

4. Open http://localhost:3000/admin.

Testing

• Integration tests (Vitest):

bun run test:int

• End-to-end tests (Playwright):

bun run test:e2e

• Full suite:

bun run test

Build and Publish

Build distributable files:

bun run build

Publishing uses publishConfig to ship dist entry points for:

• .
• ./types
• ./client
• ./rsc