Form Editor 

This chapter is the developer reference for the TYPO3 backend form editor. It covers the JavaScript extension points and the data model used by the editor's TypeScript modules.

Architecture overview 

The form editor consists of four cooperating TypeScript modules, each responsible for one UI component:

Module (import path) Component Responsibility
@typo3/form/backend/form-editor/view-model — Central view model; wires DOM events and publishes/subscribes to all cross-component events.
@typo3/form/backend/form-editor/stage-component Stage Renders the abstract and preview views of the current form page.
@typo3/form/backend/form-editor/inspector-component Inspector Renders the property editors for the selected form element.
@typo3/form/backend/form-editor/tree-component-adapter Structure tree Wraps the TYPO3 backend tree web component and bridges its events to the publish/subscribe bus.
@typo3/form/backend/form-editor/mediator — Wires all publish/subscribe events to view-model actions. Loaded automatically; replace via dynamicJavaScriptModules.mediator only when you need to completely swap the event-wiring logic.

All modules communicate exclusively via a publish/subscribe bus ( PublisherSubscriber). Direct module-to-module calls are avoided so that extension code can hook into any point without modifying core files.

Registering a custom JavaScript module 

Custom modules must export a bootstrap function. The form editor calls this function once all built-in modules have loaded, passing the central FormEditor application object as the sole argument.

  1. Create the JavaScript module

    EXT:my_extension/Resources/Public/JavaScript/backend/form-editor/view-model.js 
    /**
 * Custom form editor module for EXT:my_extension.
 */
export function bootstrap(formEditorApp) {
    const ps = formEditorApp.getPublisherSubscriber();

    ps.subscribe('view/ready', () => {
        // Editor is fully initialised – set up your custom logic here.
    });
}
    Copied!

  2. Register the module in the importmap

    EXT:my_extension/Configuration/JavaScriptModules.php 
    <?php

return [
    'dependencies' => ['form'],
    'imports' => [
        '@vendor/my-extension/'
            => 'EXT:my_extension/Resources/Public/JavaScript/',
    ],
];
    Copied!

  3. Tell the form editor to load the module

    EXT:my_extension/Configuration/Form/MyFormSet/config.yaml 
    prototypes:
  standard:
    formEditor:
      dynamicJavaScriptModules:
        additionalViewModelModules:
          10: '@vendor/my-extension/backend/form-editor/view-model.js'
    Copied!