Payload Visual Editor Plugin

This plugin provides a visual editor, including a nice UI, for Payload collections.

Note This plugin is currently under active development and still in alpha stage. Please check back periodically for updates.

Core features:

Adds a visual editor component to your collections:
- Creates the visual editor UI in the Admin UIs edit view
- Handles the live data exchange with your frontend

Warning In the Admin UI of the collections in which you use the visual editor plugin, you cannot use any elements in the {admin: {position:'sidebar'}} because for now we have to hide this area of the sidebar, to make the preview UI work. But we are elaborating on options to solve this in the future.

Installation

  yarn add payload-visual-editor
  # OR
  npm i payload-visual-editor

Basic Usage

In the plugins array of your Payload config, call the plugin with options:

// import plugin
import { visualEditor } from 'payload-visual-editor';

// import styles
import 'payload-visual-editor/dist/styles.scss';

const config = buildConfig({
  collections: [...],
  plugins: [
    visualEditor({
      previewUrl: 'http://localhost:3001/pages/preview',
      collections: {
        [COLLECTION_SLUG]: {
          previewUrl: "..." // optional individual preview url for each collection
        },
      },
      globals: {
        [GLOBAL_SLUG]: {
          previewUrl: "..." // optional individual preview url for each global
        },
      },
    }),
  ],
});

Options

previewUrl : string | mandatory

A string of the URL to your frontend preview route (e.g. https://localhost:3001/pages/preview).
collections / globals : Record<string, { previewUrl?: string; }>

An object with configs for all collections / globals which should enable the live preview. Use the collection / global slug as the key. If you don't want to override the previewUrl, just pass an empty object.

Frontend Integration in Next.js

In the next.js route which will handle your life preview use this code snippet to get the live post data of your collection directly from payload. In this case it's a collection with he name page.

const [page, setPage] = useState<Page | null>(null);

useEffect(() => {
    const listener = (event: MessageEvent) => {
        if (event.data.cmsLivePreviewData) {
            setPage(event.data.cmsLivePreviewData);
        }
    };
    window.addEventListener("message", listener, false);
    return () => {
        window.removeEventListener("message", listener);
    };
}, []);

You can now pass this to your render function and you can use all your payload collection data in there. For example like this:

return (
  <div>
      <header>
        <h1>{page.title}</h1>
      </header>
      <main>
        <div>
          <RenderBlocks blocks={page.content} />
        </div>
      </main>
  </div>
)

Development

This repo includes a demo project with payload as the backend and a simple website written in plain TypeScript. To start the demo, follow these steps:

Start docker and wait until the containers are up:

docker-compose up

Open another terminal and install root dependencies:

yarn docker:plugin:yarn

Install dependencies of the payload example:

yarn docker:example:cms:yarn

Run the payload dev server:

yarn docker:example:cms:dev

Open another terminal and install dependencies of the frontend example:

yarn docker:example:website:yarn

Start the dev server for the frontend:

yarn docker:example:website:dev

After changing collections, fields, etc., you can use yarn docker:example:cms:generate-types to create an updated interface file.
To connect with the node container, run yarn docker:shell.
To connect with the database container, run yarn docker:mongo.

DennisSnijder / payload-visual-editor