Frontend Editing
A lightweight module that enables editing entities directly in the frontend using a sidebar panel, without relying on core's Settings Tray, Contextual Links, or Quick Edit modules.
frontend_editing
Install
composer require 'drupal/frontend_editing:^1.9'
Overview
Frontend Editing provides a streamlined way to edit content entities directly from the frontend of your Drupal site. Unlike core's built-in editing solutions, this module uses a sidebar panel that loads entity edit forms as iframes, ensuring a consistent editorial experience between frontend and backend editing.
The module adds action links to enabled entity types that open their edit forms in a configurable sidebar. It supports entity reference fields with features like reordering items (move up/down), adding new referenced entities, and deleting existing references - all from the frontend without navigating away from the page.
The module integrates well with the Paragraphs module through its dedicated sub-module (Frontend Editing Paragraphs), making it ideal for page-builder-style content editing. It also supports live preview functionality when used with the Preview module, allowing editors to see changes in real-time before saving.
Features
- Edit any content entity directly from the frontend using a configurable sidebar panel
- Entity reference field operations: move items up/down, add new items before/after existing ones, delete items
- AJAX-powered content updates that refresh only the affected field area without page reload
- Live preview integration when used with the Preview module for real-time change visualization
- Configurable UI toggle button to enable/disable frontend editing actions per user session
- Customizable sidebar width settings for both normal and expanded views
- Hover highlight mode for better visual indication of editable elements
- Customizable primary UI color to match your site's design
- Option to detach sidebar editing to a separate browser window
- Duplicate action links feature for long content areas to keep actions visible
- Floating (sticky) action links option as an alternative to duplicate links
- Searchable add-items dialog when there are many bundle types to choose from
- Per-field configuration via third-party formatter settings
- Gin theme integration for consistent admin styling
- Optional hiding of contextual links when Frontend Editing is active
- Extra field plugin that can be positioned on any view display to show editing actions
Use Cases
Page Builder Content Editing
Ideal for sites using Paragraphs as a page builder. Content editors can add, edit, reorder, and delete paragraph components directly from the page view without navigating to the node edit form. Enable the Frontend Editing Paragraphs sub-module, configure your paragraph entity reference fields with move/add/delete operations, and editors can manage complex layouts in-place.
Quick Content Updates
For sites needing rapid content updates, Frontend Editing allows editors to click any editable entity and immediately start editing in a sidebar panel. This is especially useful for fixing typos, updating text, or making quick changes without losing context of where the content appears on the page.
Editorial Review Workflow
When combined with the Preview module, editors can see live previews of their changes before saving. This creates a workflow where content can be reviewed in context, making it easier to catch layout issues or content mistakes before publishing.
Multi-entity Page Editing
For pages that display multiple entities (like a landing page with multiple block references or media items), Frontend Editing allows editing each entity individually without a complex parent edit form. Each entity shows its own edit link, and changes are saved independently.
Restricted Editor Access
Use the granular permissions to give editors limited capabilities. For example, some users might only be able to edit existing content while others can also add and remove entity references. The separate permissions for move, add, and delete operations allow fine-grained access control.
Tips
- Position the 'Frontend Editing: Actions' extra field at the top of your entity view displays for better visibility.
- Use the 'Hover Highlight Mode' setting to make editable areas more visually distinct, especially helpful for content editors.
- Configure the primary UI color to match your site's branding for a cohesive editorial experience.
- For long content areas (like pages with many paragraphs), enable either 'Duplicate action links' or 'Make action links sticky' to keep editing controls visible.
- Use the UI toggle button to let editors easily disable Frontend Editing when browsing the site as a regular visitor.
- The form display setting on the extra field plugin allows you to use different form displays (simplified forms) for frontend editing vs. the full backend edit form.
- Enable AJAX content update on entity reference fields to refresh just that field area after operations instead of reloading the entire page.
Technical Details
Admin Pages 2
/admin/config/frontend-editing
Configure the main settings for Frontend Editing including sidebar appearance, UI toggle options, and action link behavior.
/admin/config/frontend-editing/entity-bundle-restrictions
Select which content entity types and their bundles should support frontend editing. After saving, the 'Frontend Editing: Actions' extra field becomes available on the Manage Display page for enabled bundles.
Permissions 5
Hooks 5
hook_entity_view_alter
Alters entity view to add frontend editing actions and configure field operations based on third-party formatter settings.
hook_field_formatter_third_party_settings_form
Adds Frontend Editing configuration options to entity reference field formatters on Manage Display pages.
hook_extra_field_display_info_alter
Alters the extra field display info to dynamically set which bundles the Frontend Editing extra field is available for.
hook_gin_content_form_routes_alter
Adds frontend_editing.form route to Gin theme's content form routes for consistent styling.
hook_toolbar
Adds the frontend editing toggle to the admin toolbar when UI toggle is disabled.
Troubleshooting 7
Ensure the entity type and bundle are enabled at /admin/config/frontend-editing/entity-bundle-restrictions. Then go to the entity's Manage Display page and enable/position the 'Frontend Editing: Actions' extra field.
These operations require per-field configuration. Edit the entity's view display, click the gear icon on the entity reference field formatter, and enable the desired Frontend Editing options in the third-party settings section.
Enable the Frontend Editing Paragraphs sub-module. This requires the Paragraphs Edit module to be installed first. Without this sub-module, paragraph entity types are disabled in the configuration.
Install and enable the Preview module. Then enable the entity types for preview in the Preview module settings. Finally, enable 'Automatic preview' in Frontend Editing settings.
Ensure 'Enable on/off toggle in UI' is checked in Frontend Editing settings. The toggle appears either in the toolbar (when UI toggle is disabled) or as a floating button (when enabled). Check the offset settings to ensure it's positioned visibly.
Adjust the 'Sidebar width' and 'Full width' settings at /admin/config/frontend-editing. Values are percentages of the viewport width.
By default, paragraph reference fields don't support translations. If the parent entity is translatable and you're editing a non-default translation, these operations are disabled unless the field is configured as translatable (using async translation modules).
Security Notes 5
- The 'administer frontend editing' permission should only be granted to trusted administrators as it controls which entity types can be edited from the frontend.
- All entity editing operations respect standard Drupal entity access checks - users can only edit entities they have permission to update.
- The module checks both entity-level and field-level access for all operations.
- CSRF protection is maintained through Drupal's form API when editing entities.
- Access to move, add, and delete operations requires both the specific Frontend Editing permission AND update access to the parent entity.