Preview Mode

The preview renders your site's own templates, CSS, and JavaScript. Detect preview mode to hide elements or switch off features there – the cookie banner, for example, or page transitions. Links inside the preview follow their own rules, listed under Link Navigation.

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:

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 if ($page->previewMode()->isFalse()): ?>
  <?php snippet('cookie-banner') ?>
<?php endif ?>

Frontend

The same page rendered as a preview embeds a data-preview-mode attribute in the document element (<html> tag). You can use this attribute to hide or disable elements in your frontend code.

/* Hide the cookie banner in preview mode */
[data-preview-mode] .cookie-banner {
  display: none;
}

/* 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. Five kinds of links take another route:

• Anchors with a fragment stay in the preview. A fragment-only link like #team scrolls to its target. Any other fragment link, like /about#team, loads that page as saved, without unsaved changes.
• Anchors marked with data-preview-ignore behave like ordinary links inside the preview – the preview then shows the linked page as saved.
• Links to another origin open in a new browser tab.
• Links below /assets/ or /media/ do nothing – neither the Panel nor the preview moves.
• Links that aren't http(s), like mailto: or tel:, do nothing either.

<a href="<?= $page->url() ?>" data-preview-ignore>Stay in the preview</a>