pixelcoda / typo3-fe-editing
Production-ready TYPO3 frontend editing with inline editing, drag-and-drop, contextual records, headless support, accessibility and optional AI.
Package info
github.com/CasianBlanaru/pixelcoda-typo3-fe-editing
Language:JavaScript
Type:project
pkg:composer/pixelcoda/typo3-fe-editing
Requires
- bk2k/bootstrap-package: ^15.0
- pixelcoda/fe-editor: dev-master
- pixelcoda/fe-editor-sitepackage: dev-master
- typo3/cms-backend: ^13.4
- typo3/cms-belog: ^13.4
- typo3/cms-beuser: ^13.4
- typo3/cms-core: ^13.4
- typo3/cms-dashboard: ^13.4
- typo3/cms-extbase: ^13.4
- typo3/cms-extensionmanager: ^13.4
- typo3/cms-felogin: ^13.4
- typo3/cms-filelist: ^13.4
- typo3/cms-fluid: ^13.4
- typo3/cms-fluid-styled-content: ^13.4
- typo3/cms-form: ^13.4
- typo3/cms-frontend: ^13.4
- typo3/cms-impexp: ^13.4
- typo3/cms-info: ^13.4
- typo3/cms-install: ^13.4
- typo3/cms-reactions: ^13.4
- typo3/cms-recycler: ^13.4
- typo3/cms-rte-ckeditor: ^13.4
- typo3/cms-seo: ^13.4
- typo3/cms-setup: ^13.4
- typo3/cms-sys-note: ^13.4
- typo3/cms-tstemplate: ^13.4
- typo3/cms-viewpage: ^13.4
- typo3/cms-webhooks: ^13.4
README
Accessible, premium frontend editing for TYPO3 12 LTS, TYPO3 13 LTS and TYPO3 14.
Edit TYPO3 content directly on the rendered website with inline text editing, drag-and-drop sorting, contextual FormEngine records, image editing, headless-ready markers and an optional AI writing assistant.
Stable release:
v1.2.3· Extension key:pixelcoda_fe_editor· Composer package:pixelcoda/fe-editor
Why Pixelcoda FE Editor?
- Edit where content is visible: update headlines and body text directly in the frontend.
- TYPO3-native persistence: all writes use DataHandler, backend permissions, CSRF protection and cache invalidation.
- Premium content operations: drag-and-drop sorting, keyboard move controls and per-element actions.
- Contextual FormEngine canvas: edit complete content records and FAL images without leaving the page.
- Works with existing frontends: automatically detects standard TYPO3
c{uid}wrappers and common content markers. - Headless-ready: explicit record markers support decoupled frontends without changing the save API.
- Accessible by design: keyboard navigation, focus management, reduced motion, visible focus states and responsive light/dark UI.
- Optional AI assistance: server-side OpenAI, Anthropic Claude, OpenRouter and Mistral integration.
Product Screenshots
| Element actions | Drag-and-drop sorting |
|---|---|
| Contextual TYPO3 editor | AI writing assistant |
|---|---|
Installable Extension
The installable TYPO3 extension lives in packages/pixelcoda_fe_editor.
Requirements
- TYPO3
^12.4 || ^13.4 || ^14.0 - PHP supported by the active TYPO3 version
- Authenticated backend user with
tt_contentmodify permission - Optional AI provider API key
Installation
Stable Composer installation after the first TYPO3 Extension Repository publication:
composer require pixelcoda/fe-editor vendor/bin/typo3 extension:setup vendor/bin/typo3 cache:flush
The TER extension key is pixelcoda_fe_editor. Tagged releases are validated,
packaged and published by the Publish extension to TER GitHub Actions
workflow.
Repository-based development:
git clone https://github.com/CasianBlanaru/pixelcoda-typo3-fe-editing.git packages/typo3_fe_editing composer config repositories.pixelcoda-fe-editor path packages/typo3_fe_editing/packages/pixelcoda_fe_editor composer require pixelcoda/fe-editor:@dev vendor/bin/typo3 extension:setup vendor/bin/typo3 cache:flush
For local DDEV development:
ddev composer config repositories.pixelcoda-fe-editor path packages/typo3_fe_editing/packages/pixelcoda_fe_editor
ddev composer require pixelcoda/fe-editor:@dev
ddev exec vendor/bin/typo3 extension:setup
Quality
- PHPStan level max without baseline
- TYPO3 12, 13 and 14 compatibility
- Pa11y WCAG2AA: no issues found
- Lighthouse Desktop Performance: 100
- Lighthouse Accessibility: 100
- Lighthouse Best Practices: 100
- Lighthouse SEO: 100
- Browser-tested contextual editor, action menu, dialogs and drag sorting
The reproducible desktop audit keeps the first visible LCP element unanimated while retaining GSAP and ScrollTrigger on following content. Results: FCP 0.2 s, LCP 0.8 s, TBT 0 ms, CLS 0.
License
See LICENSE and the installable package metadata. Pixelcoda FE Editor is developed and maintained by Casian Blanaru (Pixelcoda).