---
title: "Preview Mode"
description: "Hide cookie banners, disable animations, and toggle other live-only logic by detecting preview mode in PHP, CSS, and JavaScript."
canonical_url: "https://kirby.tools/docs/live-preview/preview-mode"
---
# Preview Mode
> Hide cookie banners, disable animations, and toggle other live-only logic by detecting preview mode in PHP, CSS, and JavaScript.
You may want to hide certain elements or disable certain features in preview mode. For example, you may want to hide the cookie banner in preview mode, or disable animations such as page transitions.
This can be done in your backend templates as well as in your frontend code.
## Backend
The Kirby Live Preview provides a `previewMode` content key that you can use to detect whether the current page is in preview mode. The key is `true` if the page is in preview mode and undefined (`false`) otherwise:
```php
if ($page->previewMode()->isTrue()) {
// Page is in preview mode
}
```
Wrap the HTML in your snippets and template that you want to hide in a conditional statement that checks for the `previewMode`. For example, you can hide the cookie banner in preview mode:
```php [site/snippets/footer.php]
previewMode()->isFalse()): ?>
```
## Frontend
The same page rendered as a preview embeds a `data-preview-mode` attribute in the document element (`` tag). You can use this attribute to hide or disable elements in your frontend code.
```css [assets/css/main.css]
/* Hide the cookie banner in preview mode */
[data-preview-mode] .cookie-banner {
display: none;
}
```
```js [assets/js/main.js]
/* Disable animations in preview mode */
const isPreviewMode = document.documentElement.dataset.previewMode === "true";
if (!isPreviewMode) {
// Run your animations or other features
}
```
## Link Navigation
Clicking a link inside the preview opens the matching Panel view instead of following the link. Four kinds of links take another route:
- **Anchors with a fragment** are handed to the browser. The test runs on the resolved URL, not on the `href` you wrote, so `/about#team` counts too – the preview navigates to that page rather than opening its Panel view.
- **Anchors marked with data-preview-ignore** behave like ordinary links inside the preview.
- **Links to another origin** open in a new browser tab.
- **Links below /assets/ or /media/** are swallowed – neither the Panel nor the preview moves.
```php [site/snippets/header.php]
Stay in the preview
```
---
Every page of this site as Markdown: