---
title: "Backend Preview"
manual: "Content Blocks"
version: "main"
permalink: "https://docs.typo3.org/permalink/friendsoftypo3/content-blocks:api-backend-preview@main"
source: "API/BackendPreview/Index.rst"
rendered: "2026-09-22T14:15:39+00:00"
---

# Backend Preview {#api-backend-preview}

Backend previews allow you to provide a preview for your frontend in the
backend. Previews are a very important part when creating custom content types
for your editors. They are the only way to help them navigate through the
jungle fo elements in the page module.

A preview can be defined by creating a file `templates/backend-preview.fluid.html`
inside your Content Block. This file is already created for you, if you use the
kickstart command.

## Content Elements {#api-backend-preview-content-elements}

By default, TYPO3 comes with a standard preview renderer for Content Elements.
However, it is specialized in rendering the preview of Core Content Elements.
This means only Core fields like `header`, `subheader` or
`bodytext` are considered. Therefore, it is advised to provide an own
preview for custom Content Elements.

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

Previews for Content Elements now must define the layout Preview and
any of the sections Header, Content or Footer.

**EXT:my_package/ContentBlocks/ContentElements/my-element/templates/backend-preview.fluid.html**

```html
<f:layout name="Preview"/>

<f:section name="Header">
    <div>My header</div>
</f:section>

<f:section name="Content">
    <f:asset.css identifier="my-backend-styles" href="{cb:assetPath()}/preview.css"/>
    <div>My content</div>
</f:section>

<f:section name="Footer">
    <div>My footer</div>
</f:section>
```

A Content Element preview consists of three parts: The header, the content area
and the footer. By defining the appropriate section it is possible to override
the standard preview rendering of TYPO3. If a section is omitted, the fallback
rendering from TYPO3 will be used instead. You can also include CSS just like in
the frontend with `f:asset.css` View Helper.

### Variables {#variables}

-   `data` (The Content Block record)
-   `site` (Site object)
-   `siteSettings` (flat site settings)

## Page Types {#api-backend-preview-page-types}

Previews for [Page Types](https://docs.typo3.org/permalink/friendsoftypo3/content-blocks:api-page-types@main) are displayed at the top of
the content area and beneath the page title. Unlike Content Elements, you don't
have to define any sections.

![Page Type preview in the TYPO3 backend](../_Images/page-type-preview.jpg)

This is an example of a Page Type preview.

## Record Types {#api-backend-preview-record-types}

Previews for [Record Types](https://docs.typo3.org/permalink/friendsoftypo3/content-blocks:api-record-types@main) can only be shown as [nested
child records](https://docs.typo3.org/permalink/friendsoftypo3/content-blocks:cb-nested-elements-backend@main) of Content Elements in the Page
Module like so:

```html
<f:comment>Provide the identifier of the child Collection to render a grid preview</f:comment>
<f:render partial="PageLayout/Grid" arguments="{data: data, identifier: 'tabs_item'}"/>
```

> [!NOTE]
> In backend context, all hidden relations like Collections or file references
> are displayed by default. Thus, the integrator should style those hidden
> elements accordingly or simply not render them.
>
> ```html
> <!-- Hidden relations like Collections -->
> <f:for each="{data.relations}" as="item">
>     <f:if condition="{item.systemProperties.disabled}"><!-- Style or hide --></f:if>
> </f:for>
>
> <!-- Hidden file references -->
> <f:for each="{data.images}" as="file">
>     <f:if condition="{file.properties.hidden}"><!-- Style or hide --></f:if>
> </f:for>
> ```

See also:

-   Learn more about [templating](https://docs.typo3.org/permalink/friendsoftypo3/content-blocks:cb-templating@main).
-   Learn how to include [shared partials](https://docs.typo3.org/permalink/friendsoftypo3/content-blocks:editor-preview-partials@main)