saransh@web

13 packages in the registry

Open source

Payload and Next.js packages released as part of the What Works Global team.

These packages were released as part of the What Works Global team. Package-specific credits are shown where they differ.

security / governance

routing / discovery

  • Stored, queryable document paths for page hierarchies.

    bun add @whatworks/payload-paths
    usage example
    example.ts
    // paths.config.ts
    import { definePathsConfig } from '@whatworks/payload-paths'
    
    export const pathsConfig = definePathsConfig({
      collections: {
        pages: {}, // nested-docs or parent auto-detected; served at the root
        posts: { prefix: '/blog' }, // flat collection under /blog
      },
    })
  • @whatworks/payload-sitemap

    v0.2.1 · 22/wk

    status
    stable

    Released as part of the What Works Global team.

    Chunked XML sitemaps for Payload with lazy caching and robots.txt helpers.

    bun add @whatworks/payload-sitemap
    usage example
    example.ts
    // payload.config.ts
    import { sitemapPlugin } from '@whatworks/payload-sitemap'
    
    export default buildConfig({
      plugins: [
        sitemapPlugin({
          collections: {
            pages: {
              path: ({ doc }) => (doc.slug === 'home' ? '/' : `/${doc.slug}`),
              select: { slug: true },
            },
          },
        }),
      ],
    })
  • @whatworks/redirects

    status
    stable

    Released as part of the What Works Global team.

    Managed redirects with Next.js middleware matching and hit tracking.

    bun @whatworks/payload-redirects
    usage example
    example.ts
    // redirects.config.ts
    import { envCache, fileCache } from '@whatworks/payload-redirects/cache'
    import { defineRedirectsConfig } from '@whatworks/payload-redirects/middleware'
    import { vercelRuntimeCache } from '@whatworks/payload-redirects/vercel'
    
    // The Vercel Runtime Cache only exists on Vercel's infrastructure, so `envCache`
    // falls back to a JSON file cache (.next/cache/payload-redirects.json) locally —
    // which is what makes `next dev` work. See "Development fallback" below.
    export const redirectsConfig = defineRedirectsConfig({
      cache: envCache({
        development: fileCache(),
        production: vercelRuntimeCache(),
      }),
    })

operations / utilities

  • @whatworks/analytics

    v3.2.0 · 43/wk

    status
    stable

    Released as part of the What Works Global team.

    Analytics components for Next.js with cookie consent — GTM, GA4, Meta, Clarity and LinkedIn behind one CMS-configurable provider.

    bun add @whatworks/analytics
    usage example
    example.ts
    // app/api/consent/route.ts
    export { GET } from '@whatworks/analytics/api/consent'
  • @whatworks/select-search-field

    status
    stable

    Released as part of the What Works Global team.

    Server-backed search select field plugin.

    bun add @whatworks/payload-select-search-field
    usage example
    example.ts
    import { selectSearch } from '@whatworks/payload-select-search-field'
    
    selectSearch({
      name: 'stripeCustomer',
      hasMany: true,
      search: {
        debounce: {
          query: 250,
          watchedFields: 600,
        },
        passDataToSearchFunction: true,
        passSiblingDataToSearchFunction: true,
        watchFieldPaths: ['customerType', 'region'],
        searchFunction: async ({ query, selectedValues }) => {
          return [
            { value: 'cus_123', label: `Result for ${query}` },
            ...selectedValues.map((value) => ({
              value,
              label: `Selected: ${value}`,
            })),
          ]
        },
      },
    })
  • @whatworks/switch-env

    status
    stable

    Released as part of the What Works Global team.

    Database environment switching for the Payload admin panel.

    bun add @whatworks/payload-switch-env
    usage example
    example.ts
    // payload.config.ts
    import { type Args, mongooseAdapter } from '@payloadcms/db-mongodb'
    import { s3Storage } from '@payloadcms/storage-s3'
    import { buildConfig } from 'payload'
    import { switchEnvPlugin, adminThumbnail } from '@whatworks/payload-switch-env'
    
    const dbArgs: Args = {
      url: process.env.DATABASE_URI!,
    }
    
    export default buildConfig({
      db: mongooseAdapter(dbArgs),
      plugins: [
        // Cloud storage plugin: second last
        s3Storage({
          bucket: process.env.S3_BUCKET!,
          collections: { media: true },
          config: {
            credentials: {
              accessKeyId: process.env.S3_ACCESS_KEY_ID!,
              secretAccessKey: process.env.S3_SECRET_ACCESS_KEY!,
            },
            region: process.env.S3_REGION,
          },
        }),
        // switchEnvPlugin: last
        switchEnvPlugin({
          payloadVersion: '3.70.0',
          enable: process.env.NODE_ENV === 'development',
          db: {
            function: mongooseAdapter,
            productionArgs: dbArgs,
            developmentArgs: {
              ...dbArgs,
              url: process.env.DEVELOPMENT_DATABASE_URI || '',
            },
          },
          copy: {
            versions: {
              default: { mode: 'latest-x', x: 3 },
            },
          },
        }),
      ],
      collections: [
        {
          slug: 'media',
          fields: [{ name: 'alt', type: 'text' }],
          upload: {
            // Optional: link admin thumbnails directly to cloud storage
            adminThumbnail: adminThumbnail({
              basePath: `https://${process.env.S3_BUCKET}.s3.${process.env.S3_REGION}.amazonaws.com`,
              imageSize: 'thumbnail',
            }),
            imageSizes: [{ name: 'thumbnail', width: 300, height: 300 }],
          },
        },
      ],
    })
  • @whatworks/utilities

    status
    stable

    Released as part of the What Works Global team.

    A collection of utilities for Payload 3.

    bun add @whatworks/payload-utilities
    usage example
    example.ts
    import { buildConfig } from 'payload'
    import { resolveJsonSchemaRelationships } from '@whatworks/payload-utilities'
    
    export default buildConfig({
      typescript: {
        schema: [resolveJsonSchemaRelationships],
      },
    })

content / editor experience

  • @whatworks/block-settings

    status
    stable

    Released as part of the What Works Global team.

    Visibility toggle for hiding extra block fields.

    bun add @whatworks/payload-block-settings
    usage example
    example.ts
    import { buildConfig } from 'payload'
    import { blockSettingsField, blockSettingsPlugin } from '@whatworks/payload-block-settings'
    
    export default buildConfig({
      collections: [
        {
          slug: 'pages',
          fields: [
            {
              name: 'components',
              type: 'blocks',
              blocks: [
                {
                  slug: 'component',
                  fields: [
                    {
                      name: 'title',
                      type: 'text',
                    },
                    blockSettingsField({
                      fields: [
                        {
                          name: 'theme',
                          type: 'select',
                          options: ['light', 'dark'],
                        },
                        {
                          name: 'anchor',
                          type: 'text',
                        },
                      ],
                      settings: {
                        location: 'drawer',
                      },
                    }),
                    blockSettingsField({
                      fields: [
                        {
                          name: 'variant',
                          type: 'select',
                          options: ['default', 'featured'],
                        },
                      ],
                      settings: {
                        canonical: true,
                        location: 'inline',
                      },
                    }),
                  ],
                },
              ],
            },
          ],
        },
      ],
      plugins: [blockSettingsPlugin()],
    })
  • @whatworks/heading-field

    status
    stable

    Released as part of the What Works Global team.

    Lets editors choose heading tags (h1–h6) for text fields.

    bun add @whatworks/payload-heading-field
    usage example
    example.ts
    import { buildConfig } from 'payload'
    import { lexicalEditor } from '@payloadcms/richtext-lexical'
    import { headingField } from '@whatworks/payload-heading-field'
    
    export default buildConfig({
      collections: [
        {
          slug: 'pages',
          fields: [
            // Just wrap the field — defaults to tags ['h1'–'h5'], default 'h2'.
            headingField({
              name: 'heading',
              type: 'text',
              label: 'Page heading',
              required: true,
            }),
    
            // Pass a second argument only when you want to override the defaults.
            // Works with textarea and richText values too.
            headingField(
              {
                name: 'intro',
                type: 'richText',
                editor: lexicalEditor(),
              },
              { tags: ['h2', 'h3', 'h4'], defaultTag: 'h3' },
            ),
          ],
        },
      ],
    })