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

# Introduction {#introduction-1}

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

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? {#who-is-it-for}

-   **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@main).

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

Look ships one Fluid view helper, `<look:backend.contentPreview>`. You
wrap it around the frontend markup of a content element, typically in the
backend preview template of a Content Block. 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.

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-1}

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