What does it do? 

This extension adds editing tools to the frontend, allowing backend users to edit, hide, delete, and reorder content elements and pages without leaving the site.

The extension injects a small JavaScript into the frontend that generates action links to the TYPO3 backend, bridging the gap between frontend preview and backend editing.

Features 

• Edit Menu - Quick access to edit, hide, delete, and move content elements
• Toolbar - Page-level actions and toggle for frontend editing
• Site Settings - Per-site configuration via YAML
• PSR-14 Events - Customize menus with custom actions
• Data ViewHelper - Add edit links for related records (e.g., news items)
• Dark/Light Mode - Automatic or manual color scheme selection
• Configurable Position - 12 toolbar positions available
• Save & Close - Quick return to frontend after editing
• Inline Editing (experimental) - Edit content directly in the frontend without navigating to the backend (TYPO3 v13: iframe modal, TYPO3 v14.2+: contextual sidebar)

New in version 2.2.0

Contextual Editing Sidebar — An experimental feature that allows editors to edit content elements and page properties in a sidebar panel directly in the frontend. Leverages TYPO3 v14.2's record_edit_contextual route. See Contextual Editing for details.

Support 

There are several ways to get support for this extension:

• GitHub: https://github.com/xima-media/xima-typo3-frontend-edit/issues

License 

This extension is licensed under GNU General Public License 2.0 (or later).

Requirements 

• PHP 8.2 - 8.5
• TYPO3 13.4 LTS - 14.x

Installation 

Require the extension via Composer (recommended):

composer require xima/xima-typo3-frontend-edit

Or download it from the TYPO3 extension repository.

Configuration 

Include the Frontend Edit (xima/xima-typo3-frontend-edit) site set.

Available Settings 

Example Configuration 

Full example with all available options:

frontendEdit:
  enabled: true
  colorScheme: 'auto'
  showContextMenu: true
  showStickyToolbar: true
  toolbarPosition: 'bottom-right'
  enableOutline: true
  enableScrollToElement: true
  enableFlashMessages: true
  enableContextualEditing: false
  filter:
    ignorePids: '1,2,3'
    ignoreDoktypes: '4,199,254'
    ignoreCTypes: 'html,div'
    ignoreListTypes: ''
    ignoreUids: ''

Disable frontend editing 

By default, frontend editing is enabled for all backend users.

Examples 

tx_ximatypo3frontendedit.disabled = 1

tx_ximatypo3frontendedit.disabled = 1

Features 

Debug 

Delete Confirmation 

Clicking Delete opens a confirmation dialog before the record is removed. The dialog shows the record title and identifier (e.g. My Element [tt_content:42]) so editors can verify they are deleting the correct element.

• Escape, the close button, or clicking the backdrop cancels the action
• Focus returns to the previously focused element after closing
• On success, a notification is shown and the page reloads automatically

Requirements 

The Edit Menu requires content elements to have a "c-id" (Content Element ID) in their HTML output, e.g. id="c908".

This is automatically provided by the fluid_styled_content extension. For custom templates, ensure the wrapping element includes the content element UID:

<div id="c{data.uid}">
    ...
</div>

See also the FAQ for common issues with the Edit Menu.

Actions 

The Toolbar includes:

• Toggle - (eye icon) Enable or disable frontend editing for the current session
• Edit page properties - Open the current page properties
• Edit page - Open the page module in the backend
• Info - Display page information
• Move - Reorder page

Position 

You can configure the Toolbar position via Site Settings:

frontendEdit:
  toolbarPosition: 'bottom-right'

Available positions:

• top-left, top-center, top-right
• bottom-left, bottom-center, bottom-right
• left-top, left-center, left-bottom
• right-top, right-center, right-bottom

Disabling Frontend Edit 

You can temporarily disable frontend editing by clicking the toggle button in the Toolbar. This setting is stored per user and persists across sessions.

To disable the Toolbar entirely, set showStickyToolbar: false in the Site Settings.

Setup 

Enable the feature in your site settings:

frontendEdit:
  enableContextualEditing: true

Or via the TYPO3 backend: Site Management > Sites > Edit site > Settings > Frontend Edit > Appearance.

Usage 

With contextual editing enabled:

• Clicking an edit button opens the sidebar instead of navigating to the backend.
• The page properties link in the sticky toolbar also opens in the sidebar.
• Ctrl+Click (or Cmd+Click on macOS) bypasses the sidebar and opens the full backend editor directly.

Limitations 

The FormEngine runs inside an iframe outside its intended context. Some advanced features may not work fully:

• IRRE / relation browsers may have limited functionality.
• Context menus (three-dot menu) are not available inside the iframe. Primary actions (edit, hide, delete) are accessible as direct buttons.
• Console errors from backend JavaScript modules are expected and harmless.

For full editing capabilities, use the expand button.

Fallback Behavior 

• Setting disabled: All edit links navigate to the backend as before.
• JavaScript disabled: Edit links fall back to their href attribute, pointing to the standard backend URL.

FrontendEditDropdownModifyEvent 

Use the FrontendEditDropdownModifyEvent to modify the Edit Menu for content elements. You can add, remove or modify buttons for specific content elements.

Available methods:

• getContentElement() - Returns the content element data array
• getMenuButton() - Returns the current menu button
• setMenuButton() - Sets the modified menu button
• getReturnUrl() - Returns the return URL for edit links

Example:

<?php

declare(strict_types=1);

namespace Vendor\Package\EventListener;

use TYPO3\CMS\Backend\Routing\UriBuilder;
use TYPO3\CMS\Core\Attribute\AsEventListener;
use TYPO3\CMS\Core\Imaging\IconFactory;
use Xima\XimaTypo3FrontendEdit\Enumerations\ButtonType;
use Xima\XimaTypo3FrontendEdit\Event\FrontendEditDropdownModifyEvent;
use Xima\XimaTypo3FrontendEdit\Template\Component\Button;

#[AsEventListener(
    identifier: 'my-extension/modify-edit-menu',
)]
class ModifyEditMenuListener
{
    public function __construct(
        protected readonly IconFactory $iconFactory,
        protected readonly UriBuilder $uriBuilder
    ) {}

    public function __invoke(FrontendEditDropdownModifyEvent $event): void
    {
        $contentElement = $event->getContentElement();
        $menuButton = $event->getMenuButton();

        // Add a custom button for a specific plugin
        if ($contentElement['CType'] === 'list' && $contentElement['list_type'] === 'news_pi1') {
            $menuButton->appendAfterChild(new Button(
                'Edit news settings',
                ButtonType::Link,
                $this->uriBuilder->buildUriFromRoute(
                    'record_edit',
                    [
                        'edit' => ['tt_content' => [$contentElement['uid'] => 'edit']],
                        'returnUrl' => $event->getReturnUrl(),
                    ],
                )->__toString(),
                $this->iconFactory->getIcon('content-news', 'small')
            ),
            'edit_page',
            'edit_news_settings'
            );
        }

        // Remove a button
        $menuButton->removeChild('div_action');

        $event->setMenuButton($menuButton);
    }
}

FrontendEditPageDropdownModifyEvent 

Use the FrontendEditPageDropdownModifyEvent to modify the Toolbar menu for page-level actions.

Available methods:

• getPageId() - Returns the current page ID
• getLanguageUid() - Returns the current language UID
• getMenuButton() - Returns the current menu button
• setMenuButton() - Sets the modified menu button
• getReturnUrl() - Returns the return URL for edit links

Example:

<?php

declare(strict_types=1);

namespace Vendor\Package\EventListener;

use TYPO3\CMS\Backend\Routing\UriBuilder;
use TYPO3\CMS\Core\Attribute\AsEventListener;
use TYPO3\CMS\Core\Imaging\IconFactory;
use Xima\XimaTypo3FrontendEdit\Enumerations\ButtonType;
use Xima\XimaTypo3FrontendEdit\Event\FrontendEditPageDropdownModifyEvent;
use Xima\XimaTypo3FrontendEdit\Template\Component\Button;

#[AsEventListener(
    identifier: 'my-extension/modify-toolbar',
)]
class ModifyToolbarListener
{
    public function __construct(
        protected readonly IconFactory $iconFactory,
        protected readonly UriBuilder $uriBuilder
    ) {}

    public function __invoke(FrontendEditPageDropdownModifyEvent $event): void
    {
        $menuButton = $event->getMenuButton();

        // Add a custom page action
        $menuButton->appendChild(new Button(
            'Clear page cache',
            ButtonType::Link,
            $this->uriBuilder->buildUriFromRoute(
                'tce_db',
                [
                    'cacheCmd' => $event->getPageId(),
                    'redirect' => $event->getReturnUrl(),
                ],
            )->__toString(),
            $this->iconFactory->getIcon('actions-system-cache-clear', 'small')
        ),
        'clear_cache'
        );

        $event->setMenuButton($menuButton);
    }
}

ColumnTargetViewHelper 

The ColumnTargetViewHelper renders a hidden <div> element as a DOM marker. No content, no styling, no logic — just a marker that the JavaScript picks up after the page loads.

Register the namespace in your Fluid template:

{namespace xfe=Xima\XimaTypo3FrontendEdit\ViewHelpers}

Or use the XML namespace syntax:

<html xmlns:xfe="http://typo3.org/ns/Xima/XimaTypo3FrontendEdit/ViewHelpers"
      data-namespace-typo3-fluid="true">

{namespace xfe=Xima\XimaTypo3FrontendEdit\ViewHelpers}

<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}', colPos: '0'}" />
<xfe:columnTarget colPos="0" />

<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}', colPos: '1'}" />
<xfe:columnTarget colPos="1" />

{namespace xfe=Xima\XimaTypo3FrontendEdit\ViewHelpers}

<div class="column-left">
    <f:for each="{children_201}" as="record">
        <f:format.raw>{record.renderedContent}</f:format.raw>
    </f:for>
    <xfe:columnTarget colPos="201" containerUid="{data.uid}" />
</div>

<div class="column-right">
    <f:for each="{children_202}" as="record">
        <f:format.raw>{record.renderedContent}</f:format.raw>
    </f:for>
    <xfe:columnTarget colPos="202" containerUid="{data.uid}" />
</div>

How it works 

1. The ViewHelper renders <div data-xfe-colpos="0" hidden></div> (invisible, no layout impact)
2. The extension's JavaScript scans the page for these markers after loading
3. An AJAX request to the backend checks which columns are empty
4. For each empty column that has a matching marker, a "+" button is injected
5. The button opens the TYPO3 record editor with the correct colPos pre-filled

Container support requires the b13/container extension. The service automatically detects whether it is installed. Without it, only page columns are supported and container markers are silently ignored.

visual_editor (FriendsOfTYPO3) 

visual_editor provides inline WYSIWYG editing using Web Components and CKEditor 5. Editors can modify text fields in place, reorder content elements via drag-and-drop, and save changes without leaving the page. It runs exclusively within a dedicated backend module that embeds the frontend page in an iframe — it does not inject editing capabilities into the regular frontend. It also requires ViewHelper integration in Fluid templates. In contrast, this extension works directly in the frontend, requires no template changes, and links to standard backend forms for editing.

feedit 

feedit was the original TYPO3 core extension for frontend editing. It injected edit icons directly into the rendered HTML on the server side. The core integration it relied on has since been removed. This extension uses a different approach with PSR-15 middleware and client-side AJAX menus.

frontend_editing 

frontend_editing is an older extension that provided frontend editing capabilities for TYPO3. This extension is not a further development of frontend_editing. While the general goal is similar, the technical approach is entirely different — this extension uses lightweight JavaScript injection and links to backend forms.

content_preview 

content_preview provides a split-view with a live frontend preview within the TYPO3 backend Page module. It enhances the backend interface, while this extension enhances the frontend. Both approaches can be used together.

Version 2.0 

Migration from version 1.x to version 2.x.

frontendEdit:
  showContextMenu: false

use TYPO3\CMS\Core\Attribute\AsEventListener;
use Xima\XimaTypo3FrontendEdit\Event\FrontendEditDropdownModifyEvent;

#[AsEventListener]
final class ModifyMenu
{
    public function __invoke(FrontendEditDropdownModifyEvent $event): void
    {
        $event->getMenuButton()->removeChild('history');
    }
}

Need Help? 

• Check the FAQ for common issues
• Open an issue on GitHub