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.0.6(1mo ago)37154โ†“22.1%2[3 PRs](https://github.com/FriendsOfTYPO3/visual_editor/pulls)1GPL-2.0-or-laterJavaScriptPHP ~8.2.0 || ~8.3.0 || ~8.4.0 || ~8.5.0CI passing Since Mar 11Pushed 1mo 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 1mo ago READMEChangelog (6)Dependencies (11)Versions (12)Used By (1) 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 50 โ€” FairBetter than 95% of packages Maintenance89 Actively maintained with recent releases Popularity26 Limited adoption so far Community19 Small or concentrated contributor base Maturity58 Maturing project, gaining track record Bus Factor1 Top contributor holds 99% 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 ~1 days Total 6 Last Release 53d 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 (190 commits)")[![s2b](https://avatars.githubusercontent.com/u/458524?v=4)](https://github.com/s2b "s2b (1 commits)")[![wazum](https://avatars.githubusercontent.com/u/146727?v=4)](https://github.com/wazum "wazum (1 commits)") --- Tags corecmsextensioneditorwysiwygvisual editorTYPO3 CMStypo3visual ### 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 [georgringer/news News system - Versatile news system based on Extbase & Fluid and using the latest technologies provided by TYPO3 CMS. 2815.1M89](/packages/georgringer-news)[fluidtypo3/vhs This is a collection of ViewHelpers for performing rendering tasks that are not natively provided by TYPO3's Fluid templating engine. 1954.1M48](/packages/fluidtypo3-vhs)[typo3/testing-framework The TYPO3 testing framework provides base classes for unit, functional and acceptance testing. 675.0M775](/packages/typo3-testing-framework)[eliashaeussler/typo3-form-consent Extension for TYPO3 CMS that adds double opt-in functionality to EXT:form 1481.0k](/packages/eliashaeussler-typo3-form-consent)[pagemachine/typo3-formlog Form log for TYPO3 23225.3k6](/packages/pagemachine-typo3-formlog)[leuchtfeuer/locate Locate - The users country, preferred language and other facts will be detected. Depending on configurable rules the user can be redirected to other languages or pages. Locate also provides geo blocking for configurable pages in configurable countries. 1182.8k](/packages/leuchtfeuer-locate) PHPackages ยฉ 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)