---
title: "Usage"
manual: "Look - real frontend previews in the TYPO3 page module"
version: "main"
permalink: "https://docs.typo3.org/permalink/flowd/typo3-look:usage@main"
source: "Usage/Index.rst"
rendered: "2026-09-17T14:56:56+00:00"
---
# Usage {#usage-1}
Look provides a single Fluid view helper. Wrap it around the frontend markup
of a content element and the page module shows that markup as a real preview.
- [Previews for Content Blocks](https://docs.typo3.org/permalink/flowd/typo3-look:previews-for-content-blocks@main)
- [Previews for classic content elements](https://docs.typo3.org/permalink/flowd/typo3-look:previews-for-classic-content-elements@main)
- [The view helper](https://docs.typo3.org/permalink/flowd/typo3-look:the-view-helper@main)
- [Assets registered by the content](https://docs.typo3.org/permalink/flowd/typo3-look:assets-registered-by-the-content@main)
- [When rendering fails](https://docs.typo3.org/permalink/flowd/typo3-look:when-rendering-fails@main)
- [Tips for good previews](https://docs.typo3.org/permalink/flowd/typo3-look:tips-for-good-previews@main)
## Previews for Content Blocks {#previews-for-content-blocks}
[Content Blocks](https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/)
render the file `templates/backend-preview.html` of a content block in
the page module. Reuse the frontend rendering there and wrap it in the view
helper:
**EXT:my_site/ContentBlocks/ContentElements/textmedia/templates/backend-preview.html**
```html
```
Three things are worth noting:
- `` with a `Content` section is the
layout Content Blocks provides for backend previews. Without it, Content
Blocks renders the template three times (header, content, footer) and the
preview appears three times.
- The markup inside the view helper is whatever your frontend template
produces. Here it is a Fluid component that receives the record; it could
just as well be a partial or plain HTML. Wrapping the element in the same
container markup as the frontend (``)
makes sure the grid and spacing rules of your CSS apply.
- `css` and `js` take the assets of your frontend build. They
are loaded inside the preview frame only, never in the backend itself.
## Previews for classic content elements {#previews-for-classic-content-elements}
Content element types without Content Blocks can use the view helper in the
Fluid template that TYPO3 renders for the page module preview. Register the
template with page TSconfig:
**EXT:my_site/Configuration/page.tsconfig**
```typoscript
mod.web_layout.tt_content.preview.textmedia = EXT:my_site/Resources/Private/Templates/Preview/Textmedia.html
```
The template receives the raw database row as `{record}` and can wrap
its rendering in the view helper the same way:
**EXT:my_site/Resources/Private/Templates/Preview/Textmedia.html**
```html
```
See the [TSconfig reference](https://docs.typo3.org/m/typo3/reference-tsconfig/main/en-us/PageTsconfig/Mod.html#mod-web-layout-tt-content-preview)
for the details of `mod.web_layout.tt_content.preview`.
## The view helper {#the-view-helper}
```html
```
- **scale**
- *Type:* float
- *Default:* extension configuration [contentPreview.scale](https://docs.typo3.org/permalink/flowd/typo3-look:confval-ext-conf-scale@main) (0.5)
Factor the frontend is scaled down with inside the preview. `0.5`
shows the site at half size, `1` at its natural size. The frame
is always as wide as the page module column; the scale decides how
much of the frontend width fits into it.
- **height**
- *Type:* integer
- *Default:* extension configuration [contentPreview.height](https://docs.typo3.org/permalink/flowd/typo3-look:confval-ext-conf-height@main) (0)
Maximum height of the preview in pixels. Elements that are taller are
cut off and fade out at the bottom, so editors see that there is more.
`0` means no limit: the frame grows with its content.
- **bodyClass**
- *Type:* string
- *Default:* (empty)
Class attribute of the `` inside the preview frame. Use it
when your stylesheet expects a class on the body, for example a theme
or a scope class.
- **css**
- *Type:* array
- *Default:* \[\]
Stylesheets to load inside the frame, as `EXT:` paths or public
URLs. Usually the CSS bundle of your frontend build. Look's own small
stylesheet (scaling, fade-out) is always loaded first.
- **js**
- *Type:* array
- *Default:* \[\]
JavaScript modules to load inside the frame, as `EXT:` paths or
public URLs. They are loaded as `