Contact
How-To

Visual Editing with visual_editor

The TYPO3 extension visual_editor makes content editable directly in the layout of the live website – by clicking, with drag & drop, and with real-time preview, without classic backend forms.

Last updated: 12.09.2026

How visual editing with visual_editor works in the TYPO3 backend

What Is visual_editor?

visual_editor is a free TYPO3 extension that lets editors edit content directly in the layout of the live website – instead of using classic backend forms. Text fields, rich-text content, images, and entire content elements can be edited, moved, or rearranged by clicking, while the page looks exactly as it does on the frontend the whole time.

The extension is developed by the TYPO3 community under the FriendsOfTYPO3 umbrella and can be installed via Composer (friendsoftypo3/visual-editor). TYPO3 13 and 14 are supported, along with PHP 8.2 to 8.5.

Features at a Glance

  • Inline WYSIWYG editing that matches the live frontend exactly

  • Drag & drop to move, add, and delete content elements

  • Real-time preview of changes, with no page reload

  • Accessibility to WCAG 2.2 AA, tested with NVDA and VoiceOver

  • Multilingual editing with side-by-side language comparison (since version 1.8.0)

  • Workspace support and optional autosave

How Editors Use visual_editor

The controls are deliberately modeled on the frontend: a left click opens editing for a text field, while a middle click or Ctrl+click follows a link instead. The built-in spotlight feature highlights all editable areas of a page at a glance, and the "show empty" option reveals which fields haven't been filled in yet.

  1. Use the spotlight feature to highlight editable areas

  2. Edit text fields and rich-text content directly with a left click

  3. Open links with a middle click or Ctrl+click instead of editing them

  4. Move content elements using the drag handles

  5. Hold Ctrl while dropping to copy an element instead of moving it

  6. Use "show empty" to find fields that are still unfilled

Current Development Status

In August 2026, a TYPO3 community-funded budget project was completed that significantly advanced the extension's accessibility, multilingual editing, and quality assurance – including PHP and Node.js unit tests, PHP functional tests, ESLint and PHPStan checks, and Rector-based code-quality tooling.

visual_editor is now considered production-ready and is already used in large, complex TYPO3 projects – deliberately without aiming to be a full page builder. The long-term goal is closer integration with TYPO3 Core; ideally, visual editing could become part of TYPO3 v15. For now, though, this is a direction rather than a confirmed Core feature.

Requirements and Installation

As with most TYPO3 extensions, installation is done via Composer:

  • composer require friendsoftypo3/visual-editor
  • Add the matching ViewHelpers (f:render.text, f:mark.contentArea) to your Fluid templates
  • Clear caches

Visual editing is then available in the backend.

Known Limitations

Content elements wrapped with the recordAs parameter currently don't support drag & drop. Headless setups are only supported to a limited extent, and cross-domain configurations can run into communication issues between domains. In multi-site setups, editors also need to log in separately on each domain.

Want your editors to be able to edit visually too?

We set up visual_editor for your TYPO3 website and integrate it into your sitepackage.

Free Consultation