PHPackages friendsoftypo3/visual-editor - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. friendsoftypo3/visual-editor ActiveTypo3-cms-extension[Utility & Helpers](/categories/utility) friendsoftypo3/visual-editor ============================ TYPO3 CMS Visual Editor - Brings a modern WYSIWYG editing experience to TYPO3 CMS. 1.9.0(3w ago)6010.0kโ†‘2154.5%10[1 issues](https://github.com/FriendsOfTYPO3/visual_editor/issues)2GPL-2.0-or-laterPHPPHP ~8.2.0 || ~8.3.0 || ~8.4.0 || ~8.5.0CI passing Since Mar 11Pushed 1mo ago6 watchersCompare [ Source](https://github.com/FriendsOfTYPO3/visual_editor)[ Packagist](https://packagist.org/packages/friendsoftypo3/visual-editor)[ RSS](/packages/friendsoftypo3-visual-editor/feed)WikiDiscussions main Synced 1w ago READMEChangelog (10)Dependencies (56)Versions (35)Used By (2) TYPO3 extension `visual_editor` =============================== [](#typo3-extension-visual_editor) Next Generation Frontend Editing for TYPO3 CMS. This extension provides visual editing features for content elements in TYPO3 CMS. Features -------- [](#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 - โ™ฟ Accessibility-aware editing controls for TYPO3 editors Editing.Made.Visual.mp4 Compatibility ------------- [](#compatibility) Visual EditorTYPO3PHPSupport / Development1.x13 - 148.2 - 8.5features, bugfixes, security updatesInstallation ------------ [](#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: [](#useful-links) - [Try the Demo](https://demo.andersundsehr.com/typo3/module/web/edit?id=1) Try the editor without any setup. - [ddev local demo setup](https://github.com/andersundsehr/ddev-demo-setup-visual-editor) test it locally - [fluid\_styled\_content addon](https://github.com/andersundsehr/visual_editor_fluid_styled_content_addon) automatic text editing for fluid\_styled\_content - [Example Commit](https://github.com/TYPO3/typo3/commit/b0ee1530107b30ece5475ea890b62b3d8919c609) How to integrate `f:render.text` - [Example Commit](https://github.com/TYPO3/typo3/commit/a99a339634b7caed123576b6ca2bb49dfb5d8cbf) How to integrate `f:render.contentArea` - [Slack Channel](https://typo3.slack.com/archives/C0ALHJR23U4) ask questions For editors ----------- [](#for-editors) - ๐Ÿ”— **Opening editable links:** when editable text is inside a link, left click starts editing the text. To open the link instead, use the middle mouse button or Ctrl/Cmd + click. - ๐Ÿ’พ **Saving changes:** use the save button. Autosave is available only when enabled, and the UI says to switch to a workspace if autosave is disabled. - ๐Ÿ”ฆ **Finding editable areas:** use Spotlight to highlight editable text, rich text, images, and content elements. - ๐Ÿ‘ป **Showing empty fields:** use "show empty" when editable but currently empty fields are hard to see. - ๐ŸŒ **Multi language edits:** available with TYPO3 v14. Use the "Multi language" view to compare translations side by side, edit visible fields in each preview, and save pending changes together. - โ†”๏ธ **Moving content:** drag content elements by their handle. Hold Ctrl while dropping to copy instead of moving. - โœ๏ธ **Editing special text characters:** type `­` for a soft hyphen and ` ` for a non-breaking space. Entity-like text that starts with `&`, such as ` `, is shown with `&` while editing so it stays literal text. Template Integration -------------------- [](#template-integration) `visual_editor` uses ViewHelpers in Fluid templates to mark the areas that should be editable. In TYPO3 v14, the extension uses existing ViewHelpers in TYPO3 Core to hook into the rendering. This means that the extension works out-of-the-box for the new theme "Camino" and also for the default `fluid_styled_content` templates. If you want to add visual editing to your own templates, you need to add some ViewHelpers to all locations that should be editable: ### Text/RichText Fields [](#textrichtext-fields) Replace the output of your texts with the `f:render.text` ViewHelper. - record is already a [Record](https://docs.typo3.org/permalink/t3coreapi:record-objects) object: ``` before: {record.header} after: {header} ``` ``` before: {record.header} after: {record -> f:render.text(field: 'header')} ``` If you do not have a Record object yet, you can create one with the `record-transformation` [DataProcessors](https://docs.typo3.org/permalink/t3tsref:recordtransformationprocessor): ``` // add record dataProcessor for all content elements lib.contentElement.dataProcessing.1768551979 = record-transformation ``` #### Editable text entities [](#editable-text-entities) For plain editable text fields, Visual Editor makes some otherwise hard-to-see characters explicit while the field is focused. Soft hyphens are shown as `­`, and non-breaking spaces are shown as ` `. Plain ampersands stay visible as `&`, but ampersands that start an entity-like sequence, such as ` `, ` `, or ` `, are shown as `&` while editing so the sequence stays literal text. When the editor changes or leaves the field, these values are converted back before validation and storage. ``` {record -> f:render.text(field: 'header')} ``` #### Fluid components [](#fluid-components) When you use Fluid components, render the editable text outside the component and pass the rendered value into the component. This keeps the component decoupled from records and TCA fields, and lets callers pass either a plain string or the result of `f:render.text`. ``` ``` Inside the component, accept the argument as a string or stringable value: ``` ``` ### ContentArea [](#contentarea) #### ViewHelper `f:render.contentArea` (v14) [](#viewhelper-frendercontentarea-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: after: ``` `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](https://docs.typo3.org/permalink/t3viewhelper:typo3-fluid-render-contentarea). > If you can not use the `f:render.contentArea` ViewHelper, you can also use the `f:mark.contentArea` ViewHelper. #### ViewHelper `f:mark.contentArea` (v13) [](#viewhelper-fmarkcontentarea-v13) > Use `f:render.contentArea` if possible! Add the `f:mark.contentArea` ViewHelper to the Fluid template that renders your content elements. search for: - `f:cObject` (typoscript rendering): ``` before: after: ``` - `each="{children_` (EXT:container): ``` before: {element.renderedContent -> f:format.raw()} after: {element.renderedContent -> f:format.raw()} ``` - `v:content.render` (EXT:vhs): ``` before: after: ``` - `flux:content.render` (EXT:flux): ``` before: after: ``` Known limitations ----------------- [](#known-limitations) - Wrapped content elements rendered with `f:render.contentArea` and `recordAs` are not currently supported for drag-and-drop. In this setup, drag handles may disappear. Move the wrapping markup into the content element rendering instead of wrapping elements at the `contentArea` level. - Headless and non-Fluid setups are not first-class integration targets. Visual Editor relies heavily on Fluid ViewHelpers that wrap output in web components and load the required JavaScript, so robust headless integration would need a public API. - Cross-domain headless setups are further limited because backend-module frame messaging does not work reliably across domains due to TYPO3 core limitations. General multi-domain setups are effectively excluded for this approach. Multi Site/Domain Setup ----------------------- [](#multi-sitedomain-setup) You need to be Logged in to every Domain separately to use the Visual Editor. OR you can use [EXT:multisite\_belogin](https://extensions.typo3.org/extension/multisite_belogin) it automatically logs you in to all sites/domains. Rich Text Styling ----------------- [](#rich-text-styling) Visual Editor uses your regular frontend CSS for the editing view. CSS that is configured only in the TYPO3 RTE configuration (`contentsCss`) is not applied there. If your project defines custom rich-text styles, add the relevant rules to your frontend CSS so the page output and the editor share the same styling. Projects with custom `lib.parseFunc_RTE` setups may also need matching frontend rules. Accessibility ------------- [](#accessibility) Visual Editor is designed with WCAG 2.2 AA as a goal, but this is not a full compliance claim for every TYPO3 project. The editor interface includes accessible labels, keyboard-focusable controls, validation announcements, and semantic roles. It has been tested with axe DevTools and NVDA. Final accessibility depends on the project templates, CSS, semantic HTML, and editor-authored content. Drag-and-drop workflows are pointer-oriented, so projects should verify alternative workflows for their editor needs. Project-level accessibility should be checked in the integrated TYPO3 site. License and Authors: License type, contributors, contact information -------------------------------------------------------------------- [](#license-and-authors-license-type-contributors-contact-information) This extension is licensed under the [GPL-2.0-or-later](https://spdx.org/licenses/GPL-2.0-or-later.html) license. with โ™ฅ๏ธ from [![anders und sehr logo](https://camo.githubusercontent.com/41704c96fb643ec85082d2e416906f498a7c65dbc494a9b8c572815c9f54fccf/68747470733a2f2f7777772e616e64657273756e64736568722e636f6d2f6c6f676f2d636c61696d2f616e646572732d756e642d736568722d6c6f676f5f33353070782e737667)](https://camo.githubusercontent.com/41704c96fb643ec85082d2e416906f498a7c65dbc494a9b8c572815c9f54fccf/68747470733a2f2f7777772e616e64657273756e64736568722e636f6d2f6c6f676f2d636c61696d2f616e646572732d756e642d736568722d6c6f676f5f33353070782e737667) ============================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================== [](#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! > ### Health Score 59 โ€” FairBetter than 98% of packages Maintenance93 Actively maintained with recent releases Popularity41 Moderate usage in the ecosystem Community29 Small or concentrated contributor base Maturity64 Established project with proven stability Bus Factor1 Top contributor holds 96.8% of commits โ€” single point of failure How is this calculated?**Maintenance (25%)** โ€” Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** โ€” Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** โ€” Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** โ€” Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~4 days Total 28 Last Release 24d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/88698?v=4)[TYPO3 GitHub Department](/maintainers/typo3)[@TYPO3](https://github.com/TYPO3) ![](https://avatars.githubusercontent.com/u/165630?v=4)[Benni Mack](/maintainers/bmack)[@bmack](https://github.com/bmack) ![](https://avatars.githubusercontent.com/u/402145?v=4)[Oliver Hader](/maintainers/ohader)[@ohader](https://github.com/ohader) ![](https://www.gravatar.com/avatar/4cfa2947b747549a4a243bb85545139173cc6822551468c9aed931baeb8bc0bc?d=identicon)[friendsoftypo3](/maintainers/friendsoftypo3) --- Top Contributors [![Kanti](https://avatars.githubusercontent.com/u/471387?v=4)](https://github.com/Kanti "Kanti (241 commits)")[![cowboyxup](https://avatars.githubusercontent.com/u/13420422?v=4)](https://github.com/cowboyxup "cowboyxup (1 commits)")[![format-gmbh](https://avatars.githubusercontent.com/u/4244457?v=4)](https://github.com/format-gmbh "format-gmbh (1 commits)")[![N0S0I](https://avatars.githubusercontent.com/u/102981181?v=4)](https://github.com/N0S0I "N0S0I (1 commits)")[![rolf-thomas](https://avatars.githubusercontent.com/u/9148913?v=4)](https://github.com/rolf-thomas "rolf-thomas (1 commits)")[![s2b](https://avatars.githubusercontent.com/u/458524?v=4)](https://github.com/s2b "s2b (1 commits)")[![twojtylak](https://avatars.githubusercontent.com/u/16890929?v=4)](https://github.com/twojtylak "twojtylak (1 commits)")[![andremichaelis](https://avatars.githubusercontent.com/u/13642705?v=4)](https://github.com/andremichaelis "andremichaelis (1 commits)")[![wazum](https://avatars.githubusercontent.com/u/146727?v=4)](https://github.com/wazum "wazum (1 commits)") --- Tags corecmsextensioneditorwysiwygvisual editorTYPO3 CMStypo3visual ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/friendsoftypo3-visual-editor/health.svg) ``` [![Health](https://phpackages.com/badges/friendsoftypo3-visual-editor/health.svg)](https://phpackages.com/packages/friendsoftypo3-visual-editor) ``` ### Alternatives [friendsoftypo3/content-blocks TYPO3 CMS Content Blocks - Content Types API | Define reusable components via YAML 103574.3k66](/packages/friendsoftypo3-content-blocks)[eliashaeussler/typo3-form-consent Extension for TYPO3 CMS that adds double opt-in functionality to EXT:form 15100.9k](/packages/eliashaeussler-typo3-form-consent)[pagemachine/typo3-formlog Form log for TYPO3 23243.0k8](/packages/pagemachine-typo3-formlog)[yoast-seo-for-typo3/yoast_seo Yoast SEO for TYPO3 571.8M9](/packages/yoast-seo-for-typo3-yoast-seo)[netresearch/rte-ckeditor-image Image support in CKEditor for the TYPO3 ecosystem - by Netresearch 631.1M8](/packages/netresearch-rte-ckeditor-image)[eliashaeussler/typo3-warming Warming - Warms up Frontend caches based on an XML sitemap. Cache warmup can be triggered via TYPO3 backend or using a console command. Supports multiple languages and custom crawler implementations. 22272.4k](/packages/eliashaeussler-typo3-warming) PHPackages ยฉ 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)