{"id":25936724,"url":"https://github.com/pemedia/payload-visual-editor","last_synced_at":"2025-04-05T12:03:53.066Z","repository":{"id":174657249,"uuid":"648494502","full_name":"pemedia/payload-visual-editor","owner":"pemedia","description":"Payload CMS plugin which provides a visual live editor directly in the Admin UI. Works for collections and globals. Compatible with any kind of JS/TS based frontend technology.","archived":false,"fork":false,"pushed_at":"2024-03-14T16:35:47.000Z","size":937,"stargazers_count":231,"open_issues_count":2,"forks_count":11,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-03-29T11:05:00.955Z","etag":null,"topics":["payload","payload-plugin","payloadcms"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pemedia.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-06-02T05:28:04.000Z","updated_at":"2025-03-29T08:17:29.000Z","dependencies_parsed_at":null,"dependency_job_id":"e7594f1b-20f1-4f31-a2d7-8c1af6996a4c","html_url":"https://github.com/pemedia/payload-visual-editor","commit_stats":null,"previous_names":["pemedia/payload-visual-editor"],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pemedia%2Fpayload-visual-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pemedia%2Fpayload-visual-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pemedia%2Fpayload-visual-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pemedia%2Fpayload-visual-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pemedia","download_url":"https://codeload.github.com/pemedia/payload-visual-editor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247332560,"owners_count":20921853,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["payload","payload-plugin","payloadcms"],"created_at":"2025-03-04T02:45:25.030Z","updated_at":"2025-04-05T12:03:53.022Z","avatar_url":"https://github.com/pemedia.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Payload Visual Editor Plugin\n\u003e **Note**\n\u003e This plugin provides a visual live preview, including a nice UI, for **[Payload](https://github.com/payloadcms/payload)**  \n\u003e   \n\u003e Version 0.x.x is compatible with Payload 1.x.x  \n\u003e Version 2.x.x is compatible with Payload 2.x.x  \n\n## Core features:\n\n- Adds a visual editor component to your collections and globals:\n  - Creates the visual editor UI in the Admin UIs edit view\n  - Handles the live data exchange with your frontend \n\n![image](https://github.com/pemedia/payload-visual-live-preview/blob/main/visual-editor-screenshot.png?raw=true)\n\n## Installation\n\n```bash\n  yarn add payload-visual-editor\n  # OR\n  npm i payload-visual-editor\n```\n\n## Basic Usage\n\nIn the `plugins` array of your [Payload config](https://payloadcms.com/docs/configuration/overview), call the plugin with [options](#options):\n\n```js\n// import plugin\nimport { visualEditor } from \"payload-visual-editor\";\n\n// import styles\nimport \"payload-visual-editor/dist/styles.scss\";\n\nconst config = buildConfig({\n  collections: [...],\n  plugins: [\n    visualEditor({\n      previewUrl: () =\u003e `http://localhost:3001/pages/preview`,\n      previewWidthInPercentage: 60,\n      collections: {\n        [COLLECTION_SLUG]: {\n          previewUrl: () =\u003e `...` // optional individual preview url for each collection\n        },\n      },\n      globals: {\n        [GLOBAL_SLUG]: {\n          previewUrl: () =\u003e `...` // optional individual preview url for each global\n        },\n      },\n    }),\n  ],\n});\n```\n\n### Options\n\n- `previewUrl` : `({ locale: string; }) =\u003e string | mandatory`\n\n  A function returning a string of the URL to your frontend preview route (e.g. `https://localhost:3001/pages/preview`). The `locale` property can be used if needed for [preview localization](#Localization).\n\n- `defaultPreviewMode` : `\"iframe\" | \"popup\" | \"none\"`\n\n  Preferred preview mode while opening an edit page the first time. After toggling, the state will be saved in localStore. Default: \"iframe\"\n\n- `previewWidthInPercentage` : `number`\n\n  Width of the iframe preview in percentage. Default: 50\n\n- `collections` / `globals` : `Record\u003cstring, { previewUrl?: ({ locale: string; }) =\u003e string; }\u003e`\n\n  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.\n\n### Localization\n\nIf you are using Localization with multiple locales, it can be very handy, to be able to adjust the preview URL based on the selected/current locale. You can pass `locale` to the `previewUrl` function in your payload config an place it, where your frontend needs it to be:\n\n```js\nconst config = buildConfig({\n  collections: [...],\n  plugins: [\n    visualEditor({\n      previewUrl: params =\u003e `https://localhost:3001/${params.locale}/pages/preview`\n      ...\n    }),\n  ],\n});\n```\n\n### Relation Fallbacks\n\nWhen adding blocks or editing relationship / upload fields, you will often encounter the issue that the data is incomplete.\nFor instance, because no relation has been selected yet.\nHowever, when such fields are marked as required and there is no check for undefined values in the frontend, \nit can lead to unexpected errors in the rendering process.  \nTo address this problem, fallbacks can be set up for the collections / globals.\nIn cases where a field is required but no value has been selected, the fallback of the respective collection will be returned.\n\n```js\nimport { CollectionWithFallbackConfig } from \"payload-visual-editor\";\n\nexport const Tags: CollectionWithFallbackConfig\u003cTag\u003e = {\n    slug: \"tags\",\n    fields: [\n        {\n            name: \"name\",\n            type: \"text\",\n            required: true,\n        },\n    ],\n    custom: {\n        fallback: {\n            id: \"\",\n            name: \"Fallback Tag\",\n            createdAt: \"\",\n            updatedAt: \"\",\n        },\n    },\n};\n```\n\n## Frontend Integration in React / Next.js \n\nIn 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`. \n\n```js\nconst [page, setPage] = useState\u003cPage | null\u003e(null);\n\nuseEffect(() =\u003e {\n    const listener = (event: MessageEvent) =\u003e {\n        if (event.data.cmsLivePreviewData) {\n            setPage(event.data.cmsLivePreviewData);\n        }\n    };\n\n    window.addEventListener(\"message\", listener, false);\n\n    return () =\u003e {\n        window.removeEventListener(\"message\", listener);\n    };\n}, []);\n```\n\nYou can now pass this to your render function and you can use all your payload collection data in there. For example like this:\n\n```js\nreturn (\n    \u003cdiv\u003e\n        \u003cheader\u003e\n            \u003ch1\u003e{page.title}\u003c/h1\u003e\n        \u003c/header\u003e\n        \u003cmain\u003e\n            \u003cRenderBlocks blocks={page.content} /\u003e\n        \u003c/main\u003e\n    \u003c/div\u003e\n);\n```\n\nSince the document will only be send to the frontend after a field has been changed the preview page wouldn\"t show any data on first render.\nTo inform the cms to send the current document state to the frontend, send a `ready` message to the parent window, as soon as the DOM / react app is ready:\n\n```js\n// react\nuseEffect(() =\u003e {\n    (opener ?? parent).postMessage(\"ready\", \"*\");\n}, []);\n\n// vanilla js\nwindow.addEventListener(\"DOMContentLoaded\", () =\u003e {\n    (opener ?? parent).postMessage(\"ready\", \"*\");\n});\n```\n\n## Development\n\nThis repo includes a demo project with payload as the backend and a simple website written in plain TypeScript.\nTo start the demo, follow these steps:\n\n1. Start docker and wait until the containers are up:\n\n```sh\ndocker-compose up\n```\n\n2. Open another terminal and install root dependencies:\n\n```sh\nyarn docker:plugin:yarn\n```\n\n3. Install dependencies of the payload example:\n\n```sh\nyarn docker:example:cms:yarn\n```\n\n4. Run the payload dev server:\n\n```sh\nyarn docker:example:cms:dev\n```\n\n5. Open another terminal and install dependencies of the frontend example:\n\n```sh\nyarn docker:example:website:yarn\n```\n\n6. Start the dev server for the frontend:\n\n```sh\nyarn docker:example:website:dev\n```\n\n- After changing collections, fields, etc., you can use `yarn docker:example:cms:generate-types` to create an updated interface file.\n- To connect with the node container, run `yarn docker:shell`.\n- To connect with the database container, run `yarn docker:mongo`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpemedia%2Fpayload-visual-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpemedia%2Fpayload-visual-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpemedia%2Fpayload-visual-editor/lists"}