---
title: "Inline Editing"
manual: "Frontend Edit"
version: "2.6"
source: "Usage/InlineEditing.rst"
rendered: "2026-10-01T07:11:45+00:00"
---

# Inline Editing {#contextual-editing}

<!-- TODO: no Markdown rendering for "versionadded" -->

> [!NOTE]
> Inline editing is **experimental**. Details of the interface may change in
> future releases.

Inline editing lets editors change content elements and page properties without
leaving the frontend. Clicking an edit button opens the TYPO3 FormEngine edit
form in a panel next to the page — no detour through the backend.

![Screencast of inline editing](../Images/contextual-sidebar.gif)

## Setup {#inline-editing-setup}

Inline editing is **off by default**. Enable it in your site settings:

**config/sites/my-site/settings.yaml**

```yaml
frontendEdit:
  enableContextualEditing: true
```

Or via the TYPO3 backend:
**Site Management > Sites > Edit site > Settings > Frontend Edit > Appearance**.

> [!IMPORTANT]
> The setting is required on **all supported TYPO3 versions**. What differs is
> only *how* the edit form is presented — see [How the form is presented](#inline-editing-variants).
> The setting name kept its technical spelling
> ([frontendEdit.enableContextualEditing](../Configuration/SiteSettings.html#confval-frontendedit-enablecontextualediting)) for backwards
> compatibility.

## How the form is presented {#inline-editing-variants}

The extension picks the presentation automatically, based on whether the TYPO3
core route `record_edit_contextual` is available. There is nothing to
configure beyond the setting above.

**TYPO3 v14.2 and newer**

Edit links open a **sidebar panel** that slides in from the right,
driven by the native `record_edit_contextual` route.

Creating new content still uses the slide-in modal, because the
New Content Element Wizard is hosted in the page module.

![Inline editing sidebar on TYPO3 v14.2+](../Images/sidebar.png)

**TYPO3 v13 and v14.0 / v14.1**

Edit links open a **slide-in modal** that loads the standard backend
edit form in an iframe. The route `record_edit_contextual` does not
exist on these versions, so the modal takes over both editing and the
New Content Element Wizard.

From an editor's perspective the workflow is the same: open, edit,
save, close.

![Screencast of creating new content via the New Content Element Wizard](../Images/new-content.gif)

## Usage {#inline-editing-usage}

With inline editing enabled:

-   Clicking an **edit button** opens the panel instead of navigating to the
    backend.
-   The **page properties** link in the [toolbar](Toolbar.html#toolbar) opens in the
    panel as well.
-   **Ctrl+Click** (or **Cmd+Click** on macOS) bypasses the panel and opens the
    full backend editor directly.

### Controls {#controls}

-   **Save**

    Saves the record and keeps the panel open.

-   **Save & Close**

    Saves and closes the panel. The page reloads to reflect the changes.

-   **Close**

    Closes the panel. Unsaved changes trigger a confirmation prompt.

-   **Expand**

    Opens the full backend editor. Respects the
    [Target blank](../Configuration/ExtensionConfiguration.html#extconf-linkTargetBlank) setting (same window or new
    tab).

**Escape** and clicking the **backdrop** also close the panel.

## Limitations {#inline-editing-limitations}

The FormEngine runs outside its intended context, so some advanced features are
limited:

| Area | Behavior |
| --- | --- |
| IRRE / relation browsers | May have limited functionality. |
| Context menus (three-dot menu) | Not available inside the panel. The primary actions (edit, hide, delete) are available as direct buttons. |
| Console errors | Errors from backend JavaScript modules are expected and harmless. |

> [!TIP]
> For the full editing experience use the **Expand** button, which opens the
> record in the regular backend.

## Fallback behavior {#inline-editing-fallback}

-   **Setting disabled**

    All edit links navigate to the backend, exactly as without this feature.

    ![Classic editing without inline editing](../Images/classic-edit.gif)

-   **JavaScript disabled**

    Edit links fall back to their `href` attribute, which points to the
    standard backend URL.

> [!NOTE]
> **See also**
>
> -   [frontendEdit.enableContextualEditing](../Configuration/SiteSettings.html#confval-frontendedit-enablecontextualediting) — the setting reference
> -   [Column Targets](../Integration/ColumnTargets.html#empty-columns) — creating new content in a column, which also
>     relies on this setting