---
title: "Introduction"
manual: "Look - real frontend previews in the TYPO3 page module"
version: "1.1"
permalink: "https://docs.typo3.org/permalink/flowd/typo3-look:introduction@1.1"
source: "Introduction/Index.rst"
rendered: "2026-09-23T15:29:09+00:00"
---

# Introduction {#introduction}

## What does it do? {#what-it-does}

The TYPO3 page module normally shows a content element as a plain summary: a
headline, the first lines of text, maybe a thumbnail. Editors have to open the
frontend to see what they actually built.

Look changes that. It renders every content element with the **real frontend
templates, stylesheets and images of your website** and shows the result
directly in the page module, scaled down to fit. What you see in the backend
is what visitors get on the website.

![The TYPO3 page module showing content elements rendered with the real frontend design](../Images/PageModule.png)

Each preview lives in its own **isolated frame**. It looks like the frontend
but cannot interact with the backend: no clicks, no scripts of the page
content, no access to the editor's session. The frame adapts its height to
the content automatically, so short and tall elements both look natural.

![A text and media element with headline, text and an image in the page module](../Images/PreviewTextMedia.png)

## Who is it for? {#for-whom}

-   **Editors** see the effect of every setting immediately: a different
    header layout, a coloured section, an image position. No more switching
    between backend and frontend. With the edit overlay enabled, a click on
    the preview opens the element for editing.
-   **Integrators** reuse the frontend templates they already have. A preview
    is one Fluid tag around the existing rendering, there is no second
    template to keep in sync.
-   **Administrators** get previews that are safe by default. Scripts and
    media of the website are switched off inside the preview until they are
    explicitly allowed, see [Security](https://docs.typo3.org/permalink/flowd/typo3-look:security@1.1).

## How does it work? {#how-it-works}

Look's central view helper is `<look:backend.contentPreview>`. You
wrap it around the frontend markup of a content element. The view helper

1.  renders the markup you pass it,
1.  puts it into a complete HTML document together with the stylesheets and
    scripts of your site,
1.  and shows that document in a sandboxed `<iframe>` in the page module.

Where the markup comes from depends on the site. With Content Blocks and
Fluid Components, the backend preview of a block calls the same component as
the frontend, the preferred way. Classic content types rendered through
TypoScript hand the record to the view helper, which renders it with the
frontend TypoScript of its page in a separate request, so the site's PHP
never runs inside the page module. Both are described in [Usage](https://docs.typo3.org/permalink/flowd/typo3-look:usage@1.1).

The frame reports its content height to the backend, so the page module
always shows the whole element (or a fixed height with a fade-out, if you
prefer). Everything else, from the design to the icons, comes from your own
frontend build.

## Compatibility {#compatibility}

| Look version | TYPO3 version | PHP version |
| --- | --- | --- |
| main | 13.4 LTS, 14.3+ | 8.2 or later |