friendsoftypo3/visual-editor

TYPO3 CMS Visual Editor - brings a modern WYSIWYG editing experience to TYPO3 CMS.

1.0.0 2026-03-11 13:21 UTC

Requires

• php: ~8.2.0 || ~8.3.0 || ~8.4.0 || ~8.5.0
• typo3/cms-backend: ^13.4.22 || ^14.2.0 || 14.2.x-dev
• typo3/cms-core: ^13.4.22 || ^14.2.0 || 14.2.x-dev
• typo3/cms-extbase: ^13.4.22 || ^14.2.0 || 14.2.x-dev
• typo3/cms-fluid: ^13.4.22 || ^14.2.0 || 14.2.x-dev
• typo3/cms-frontend: ^13.4.22 || ^14.2.0 || 14.2.x-dev
• typo3/cms-rte-ckeditor: ^13.4.22 || ^14.2.0 || 14.2.x-dev

Requires (Dev)

• b13/container: ^3.2.2
• pluswerk/grumphp-config: ^10.2.6
• saschaegerer/phpstan-typo3: ^2.1.1 || ^3.0.1
• ssch/typo3-rector: ^3.12.1
• typo3fluid/fluid: ^4.6.0 || 4.6.x-dev || ^5

Suggests

• wapplersystems/multisite-belogin: You should install this extension, if you have multiple domains in your TYPO3 installation.

GPL-2.0-or-later

• cms
• wysiwyg
• editor
• extension
• visual
• core
• typo3
• TYPO3 CMS
• visual editor

README

Next Generation Frontend Editing for TYPO3 CMS.

This extension provides visual editing features for content elements in TYPO3 CMS.

Features

• ✍️ Inline editing it looks perfectly like the frontend output (WYSIWYG)
• 🧲 Drag-and-drop repositioning of content elements (➕ adding and 🗑️ deleting elements)
• ⚡ Real-time preview of changes without page reloads
• 😊 User-friendly interface for non-technical editors

Editing.Made.Visual.mp4

Installation

1. 📦 composer require friendsoftypo3/visual-editor (or install via 🧩 Extension Manager)
2. 🧱 Add f:render.text, f:mark.contentArea to your templates (see below)
3. 🧹 Clear caches
4. 🚀 Start editing!

Useful links:

• ddev demo setup test it locally
• fluid_styled_content addon automatic text editing for fluid_styled_content
• Example Commit How to integrate f:render.text
• Example Commit How to integrate f:render.contentArea
• Slack Channel ask questions

Where to add the ViewHelpers

Text/RichText Fields

Replace the output of your texts with the f:render.text ViewHelper.

• record is already a Record object:

before:
<f:if condition="{record.header}">
  <h1>{record.header}</h1>
</f:if>

after:
<f:variable name="header" value="{record -> f:render.text(field: 'header')}" />
<f:if condition="{header}">
  <h1>{header}</h1>
</f:if>

before:
<h1>{record.header}</h1>

after:
<h1>{record -> f:render.text(field: 'header')}</h1>

If you do not have a Record object yet, you can create one with the record-transformation DataProcessors:

// add record dataProcessor for all content elements
lib.contentElement.dataProcessing.1768551979 = record-transformation

ContentArea

ViewHelper f:render.contentArea (v14)

This newly introduced ViewHelper (v14) is the recommended way to render content areas in the TYPO3 in general.

Short description what you need to change in your templates:

before:
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '3'}"/>

after:
<f:render.contentArea contentArea="{content.main}" />

content.main here is automatically filled if you use PAGEVIEW and a BackendLayout with a column with an Identifier named main.

More information in the Official Documentation.

If you can not use the f:render.contentArea ViewHelper, you can also use the f:mark.contentArea ViewHelper.

ViewHelper f:mark.contentArea (v13)

Use f:render.contentArea if possible!

Add the f:mark.contentArea ViewHelper to the container element that holds your content elements.

search for:

• f:cObject (typoscript rendering):

  before:
  <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '3'}"/>
  
  after:
  <f:mark.contentArea colPos="3">
    <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '3'}"/>
  </f:mark.contentArea>

• each="{children_ (EXT:container):

  before:
  <f:for each="{children_201}" as="element">
    {element.renderedContent -> f:format.raw()}
  </f:for>
  
  after:
  <f:mark.contentArea colPos="201" txContainerParent="{record.uid}">
    <f:for each="{children_201}" as="element">
      {element.renderedContent -> f:format.raw()}
    </f:for>
  </f:mark.contentArea>

• v:content.render (EXT:vhs):

  before:
  <v:content.render column="0"/>
  
  after:
  <f:mark.contentArea colPos="0">
    <v:content.render column="0"/>
  </f:mark.contentArea>

• flux:content.render (EXT:flux):

  before:
  <flux:content.render area="column0"/>
  
  after:
  <f:mark.contentArea colPos="{data.uid}00">
    <flux:content.render area="column0"/>
  </f:mark.contentArea>

Multi Site/Domain Setup

You need to be Logged in to every Domain separately to use the Visual Editor.

OR you can use EXT:multisite_belogin it automatically logs you in to all sites/domains.

License and Authors: License type, contributors, contact information

This extension is licensed under the GPL-2.0-or-later license.

with ♥️ from

If something did not work 😮
or you appreciate this Extension 🥰 let us know.

We are always looking for great people to join our team!
https://www.andersundsehr.com/karriere/