Nitrogen Connector Payload

A Payload CMS plugin for visual page building with Nitrogen.

Setup

This project uses the nitrogen-connector-payload plugin for visual page building with Nitrogen. Here's how to install it in a fresh Payload CMS project:

1. Install Dependencies

pnpm add nitrogen-connector-payload //This is not done yet. It's dev only for now.
pnpm add @nitrogenbuilder/client-react @nitrogenbuilder/client-core @nitrogenbuilder/types

2. Add Plugin to Payload Config

In your src/plugins/index.ts (or wherever you configure plugins):

import { nitrogenConnectorPlugin } from "nitrogen-connector-payload"; //This is not done yet. For Dev: "link:../nitrogen-connector-payload"

export const plugins: Plugin[] = [
  nitrogenConnectorPlugin({
    collections: ["pages", "posts"], // Collections to enable Nitrogen editing on
  }),
  // ... other plugins
];

3. Wrap Your Page Routes

In your page route files (e.g., src/app/(frontend)/[slug]/page.tsx), wrap your content with NitrogenWrapper:

import { NitrogenWrapper } from 'nitrogen-connector-payload/frontend'

export default async function Page({ params, searchParams }) {
  const page = await queryPage(...)
  const search = await searchParams

  return (
    <NitrogenWrapper page={page} searchParams={search} collection="pages">
      {/* Your regular page content */}
      <RenderHero {...page.hero} />
      <RenderBlocks blocks={page.layout} />
    </NitrogenWrapper>
  )
}

That's it! The NitrogenWrapper component automatically:

• Detects when the Nitrogen editor is requesting the page (via ?nitrogen-builder query param)
• Checks if the page has Nitrogen data
• Renders the Nitrogen visual builder when needed, otherwise renders your regular content

Adding Custom Components

To register custom Nitrogen components, create a client component:

// src/components/NitrogenComponents.tsx
"use client";

import { nitrogen } from "nitrogen-connector-payload/frontend";
import type {
  ComponentSettings,
  ComponentSettingsToProps,
} from "nitrogen-connector-payload/frontend";
import MyComponent from "./MyComponent";

const myComponentSettings = {
  categories: {
    content: {
      label: "Content",
      groups: {
        content: {
          label: "Content",
          props: {
            title: { type: "string", default: "Hello" },
          },
        },
      },
    },
  },
} as const satisfies ComponentSettings;

// Register on module load
nitrogen.registerModule("my-component", MyComponent, myComponentSettings);

export {};

Then import it in your page route:

import "@/components/NitrogenComponents";