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.6.0(1mo ago)523.1kโ†‘1093.8%22GPL-2.0-or-laterJavaScriptPHP ~8.2.0 || ~8.3.0 || ~8.4.0 || ~8.5.0CI passing Since Mar 11Pushed 3mo ago3 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 3w ago READMEChangelog (6)Dependencies (26)Versions (27)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 Editing.Made.Visual.mp4 Installation ------------ [](#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) - [ddev 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 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 ``` ### 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: ``` 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. 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 54 โ€” FairBetter than 97% of packages Maintenance86 Actively maintained with recent releases Popularity35 Limited adoption so far Community23 Small or concentrated contributor base Maturity62 Established project with proven stability Bus Factor1 Top contributor holds 97.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 ~3 days Total 21 Last Release 43d 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 (227 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)")[![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)")[![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 101466.4k45](/packages/friendsoftypo3-content-blocks)[pagemachine/typo3-formlog Form log for TYPO3 23233.9k7](/packages/pagemachine-typo3-formlog)[netresearch/rte-ckeditor-image Image support in CKEditor for the TYPO3 ecosystem - by Netresearch 611.0M6](/packages/netresearch-rte-ckeditor-image)[georgringer/news News system - Versatile news system based on Extbase & Fluid and using the latest technologies provided by TYPO3 CMS. 2825.2M112](/packages/georgringer-news)[eliashaeussler/typo3-form-consent Extension for TYPO3 CMS that adds double opt-in functionality to EXT:form 1590.6k](/packages/eliashaeussler-typo3-form-consent)[web-vision/wv_deepltranslate DeepL Translate (CORE) - This extension provides option to translate content element, and TCA record texts to DeepL supported languages. 33296.7k](/packages/web-vision-wv-deepltranslate) PHPackages ยฉ 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)