---
title: "Integration with EXT:container"
manual: "Content Blocks"
version: "main"
permalink: "https://docs.typo3.org/permalink/friendsoftypo3/content-blocks:container-integration@main"
source: "Guides/ContainerIntegration/Index.rst"
rendered: "2026-09-22T14:15:39+00:00"
---

# Integration with EXT:container {#container-integration}

This guide describes how to combine Content Blocks with the
[EXT:container](https://extensions.typo3.org/extension/container) extension
to create container content elements with grid-based backend rendering.

Content Blocks handles the Content Element definition, icon registration, and
frontend template, while EXT:container takes care of the grid configuration and
backend preview rendering.

## Prerequisites {#prerequisites}

-   EXT:container >=4.0.0 is installed and configured in your TYPO3 project.

## Step 1: Define the Content Block {#step-1-define-the-content-block}

Create a Content Block for your container element. The fields you define here
are the container's own fields (e.g. a header). The child columns are managed
by EXT:container separately.

**EXT:your_extension/ContentBlocks/ContentElements/two-column-container/config.yaml**

```yaml
name: vendor/two-column-container
typeName: vendor_two_columns_container
group: container
saveAndClose: true
fields:
  - identifier: header
    useExistingField: true
```

## Step 2: Register the Container Configuration {#step-2-register-the-container-configuration}

Register the container grid configuration manually via TCA overrides. This is
where EXT:container's `ContainerConfiguration` API is used to define the
column layout.

> [!NOTE]
> In the future, EXT:container may provide a helper method to simplify this
> registration further.

> [!NOTE]
> Prior to EXT:container version 4.0.0 it was needed to override the preview
> renderer with `ContainerPreviewRenderer`. This line can be removed with
> the new version.

**EXT:your_extension/Configuration/TCA/Overrides/tt_content_container.php**

```php
<?php

use B13\Container\Backend\Preview\ContainerPreviewRenderer;
use B13\Container\Tca\ContainerConfiguration;

$containerConfiguration = new ContainerConfiguration(
    cType: 'vendor_two_columns_container',
    label: '',
    description: '',
    grid: [
        [
            ['name' => 'Left', 'colPos' => 200],
            ['name' => 'Right', 'colPos' => 201],
        ],
    ]
);
$GLOBALS['TCA']['tt_content']['containerConfiguration'][$containerConfiguration->getCType()] = $containerConfiguration->toArray();
```

## Step 3: Add the TypoScript Rendering Definition {#step-3-add-the-typoscript-rendering-definition}

Add a TypoScript rendering definition that uses EXT:container's
`ContainerProcessor` to load the child elements.

```typoscript
tt_content.vendor_two_columns_container {
  dataProcessing {
    100 = B13\Container\DataProcessing\ContainerProcessor
  }
}
```

## Result {#result}

After completing these steps, Content Blocks and EXT:container are working
together:

-   **Content Blocks** manages the Content Element definition, field configuration
    (including FlexForm via YAML instead of XML), icon registration, and the
    frontend template.
-   **EXT:container** manages the grid configuration and backend preview rendering.

This gives you full control over the container's own fields while EXT:container
handles child element placement.

## Future Improvements {#container-integration-future}

Ideally, all configuration would live in one place — the Content Block YAML
file. This would require:

-   Content Blocks introducing a dedicated `Container` content type that holds
    the EXT:container grid configuration.
-   EXT:container providing an API to register container configuration without
    simultaneously registering a new Content Element in TCA.

Work towards this closer integration between the two extensions is planned.