TYPO3 Visual Editor

Use this skill to make a TYPO3 project ready for friendsoftypo3/visual-editor, especially when upgrading Fluid templates so editors can edit fields and content areas in context.

The critical work is not only installing the extension. The Visual Editor needs frontend output that is traceable back to records, fields, and content areas. Migrate page columns to f:render.contentArea where possible and migrate editable text fields to f:render.text.

What it does

The Visual Editor adds an in-backend frontend editing mode for TYPO3 content. Editors can work close to the rendered page, with inline text editing, drag-and-drop repositioning, adding/removing content elements, real-time preview behavior, workspace support, optional autosaving, container support, and Context Panel integration.

For custom sitepackages, the extension depends on Fluid hooks:

• f:render.text marks TCA-backed text fields as editable and renders them according to field configuration.
• f:render.contentArea renders TYPO3 v14.2+ page content areas and lets extensions modify content-area output.
• f:mark.contentArea is the Visual Editor fallback for TYPO3 v13 or legacy renderers that cannot yet use f:render.contentArea.

When to use

Use this skill when the user asks for: