Paragraphs Visual Editor

Edit a Paragraphs field visually: see the page as visitors will, click a paragraph to edit it, and add, move, duplicate or remove paragraphs in place. Changes stay in a shared draft until you save.

Features

• Dedicated editor page with a sidebar outline and a live preview of the real page, rendered in your front-end theme.
• Edit paragraphs with their normal field widgets, such as CKEditor and Media Library, in the admin theme's off-canvas panel.
• Add (nested paragraphs too), remove, duplicate and reorder by drag and drop or with the keyboard.
• Shared drafts: nothing goes live until Save, and two editors can't silently overwrite each other (others can take over a draft after confirming).
• A save dialog with revision log and full Content Moderation support (workflow transitions, pending revisions).

Post-Installation

On the entity's form display (for example Manage form display on a content type), set the Paragraphs field's widget to Paragraphs visual editor launcher. Then open the content and click "Visual editor". There is no configuration page.

Additional Requirements

• Drupal 11.3 or later (uses core's HTMX support)
• Paragraphs and Entity Reference Revisions

Recommended modules/libraries

Content Moderation (core), Navigation (core) and Gin / Claro as the admin theme.

Similar projects

Drupal Core's Layout Builder works on layouts and blocks. This module edits the paragraphs in a Paragraphs field and keeps Paragraphs and its revisions as the source of truth.

---

Test it out

A small plain static HMTL demo has been provided and uploaded: https://randalvanheede.github.io/paragraphs-visual-editor-demo/

Disclaimer: This is not a carbon copy of the actual implementation, just a quick showcase.

---