---
title: "Form Editor"
manual: "Form"
version: "14.3"
permalink: "https://docs.typo3.org/permalink/typo3/cms-form:apireference-formeditor-stage@14.3"
source: "D/FormEditor/Index.rst"
rendered: "2026-09-19T11:59:02+00:00"
---

# Form Editor {#apireference-formeditor-stage}

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](https://docs.typo3.org/permalink/typo3/cms-form:architecture-overview@14.3)
-   [Registering a custom JavaScript module](https://docs.typo3.org/permalink/typo3/cms-form:registering-a-custom-javascript-module@14.3)

## Architecture overview {#apireference-formeditor-architecture}

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 {#apireference-formeditor-custom-modules}

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**

    ```javascript
    /**
     * 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.
        });
    }

    ```
1.  Register the module in the importmap

    **EXT:my_extension/Configuration/JavaScriptModules.php**

    ```php
    <?php

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

    ```
1.  Tell the form editor to load the module

    **EXT:my_extension/Configuration/Form/MyFormSet/config.yaml**

    ```yaml
    prototypes:
      standard:
        formEditor:
          dynamicJavaScriptModules:
            additionalViewModelModules:
              10: '@vendor/my-extension/backend/form-editor/view-model.js'

    ```

-   [JavaScript events](https://docs.typo3.org/permalink/typo3/cms-form:javascript-events@14.3)
-   [Stage templates](https://docs.typo3.org/permalink/typo3/cms-form:stage-templates@14.3)
-   [FormElement model](https://docs.typo3.org/permalink/typo3/cms-form:formelement-model@14.3)