CKEditor has served us well for years – but with TYPO3 v14, there is room for a modern approach. The typo3-tiptap project integrates the TipTap editor, which is built on the proven ProseMirror engine, as a fully-fledged FormEngine element. The project was funded by the TYPO3 Association's Community Ideas Program Q3 2025.
This fork adds TYPO3 v14 compatibility, workspace support and documented caveats around the rendering boundary, making the extension production-ready for v14 projects.
Table of Contents
Overview
What has been done
Features in detail
Installation
Overview
typo3-tiptap is a TYPO3 extension that provides the TipTap editor as its own FormEngine element. TipTap is built on ProseMirror and offers a clean plugin system that is wired up through YAML configuration in TYPO3: toolbar buttons, bubble menu and custom plugins can be controlled granularly for each text field.
The upstream project originates from in2code GmbH and was funded by the TYPO3 Association's Community Ideas Program Q3 2025. In other words, it is not a private experiment but a community-backed project with official funding behind it.
This package requires TYPO3 ^14.0 and PHP >=8.3.0. EXT:workspaces is optional but recommended if draft records are linked via the link browser. rte_ckeditor is not required and should not be entered as a dependency. TYPO3 v13 and earlier versions are not supported.
What has been done
This fork builds on the upstream project from in2code and extends it specifically for use in TYPO3 v14 projects. The most important step was the upgrade to TYPO3 v14 including workspace support: the TYPO3 link browser is now called with workspace context, ensuring draft records are correctly linked and preventing data loss in unpublished drafts.
Additionally, a balloon UI mode (floating toolbar directly on the selected text) has been added, which can be used alongside the classic fixed toolbar mode. The rendering boundary has been documented: f:render.contentArea does not work inside the editor; a clear sitepackage separation is required. Furthermore, the Abbreviation and Language plug-ins have been documented, a bugfix that isolates each editor's configuration when running multiple TipTap instances on a single page has been applied, and the dependency on rte_ckeditor has been completely removed.
Features in detail
The extension registers its own FormEngine render element (tiptap), which can be activated for any text field via TCA configuration. The entire plugin selection and configuration is handled in YAML – no PHP registrations, no Fluid overrides.
| Feature | Benefits for content editors and developers |
|---|---|
| Toolbar configuration (YAML) | Enable or disable buttons granularly per text field – no overrides required. |
| Bubble menu mode | Context-sensitive toolbar appears on selected text; fewer distractions while writing. |
| Link browser integration | Workspace context provided – draft records are correctly linked, preventing data loss. |
| Abbreviation plugin | Generates semantic <abbr title="..."> with an optional data-tooltip attribute. |
| Language plugin | Generates <span lang> with xml:lang – clean for multilingual text passages. |
| Custom plugin API | defineTipTapPlugin + Zod validation for custom extensions without a fork. |
| contentCss option | Load project-specific CSS into the shadow DOM of the editor web component – WYSIWYG closer to frontend appearance. |
| Tables, justify, styles | Common formatting and CSS classes per element – configurable via YAML. |
The semantic output is clearly distinct from the previous CKEditor behaviour: the Abbreviation plugin writes <abbr> with title and data-tooltip attributes, and the Language plugin uses <span lang> with xml:lang – both are directly relevant for accessibility.
Installation
composer config repositories.typo3-tiptap vcs https://github.com/dirnbauer/typo3-tiptap.git
composer require in2code/typo3-tiptap:dev-mainAfter installation, switch the TCA of the desired field to renderType = tiptap and activate the required plugins in the YAML configuration. For workspace projects, we recommend activating EXT:workspaces as a suggest dependency – the extension will work without it, but the link browser context will be missing.
Frequently Asked Questions
Conclusion
TipTap is a mature approach to a modern rich text editor in TYPO3: ProseMirror-based, plugin-friendly, and semantically clean in its output. This fork makes the extension ready for production use in daily TYPO3 v14 operations – with workspace support, documented limitations and a bugfix for multiple instances.
Our thanks go to in2code GmbH and the TYPO3 Association's Community Ideas Program Q3 2025 for the excellent typo3-tiptap extension. We are using it and have extended it for TYPO3 v14 by adding workspace context, multi-instance stability and documented rendering limits. The bulk of the work comes from in2code GmbH: ProseMirror/TipTap integration, YAML-based plugin configuration and RTE architecture. The extension is licensed under GPL-2.0-or-later.