Kirby Tools
v2.6.0Hub

Changelog

Latest features, fixes, and improvements. Update via Composer or download the ZIP file.
Download v2.6.0

v2.6.0

🚀 Features

  • Page render hooks: The page.render:before and page.render:after hooks are now triggered during live preview rendering. If your project relies on render hooks – for example, to load classes or modify template data – they now work as expected.

v2.5.0

🚀 Features

  • System view license management: View your license key, activation status, and version compatibility directly in the Kirby Panel system view. Activate new licenses without leaving the Panel – no more manual file editing required.

v2.4.0

🚀 Features

  • Kirby 5 license status integration: The plugin now displays its license status on the Panel's system page, following Kirby 5's plugin license management conventions. This provides a unified view of all plugin licenses alongside Kirby's own license information.

v2.3.3

🐞 Bug Fixes

  • Template validation: The plugin now throws a descriptive exception if the <head> tag is missing in your page template. Live Preview requires a <head> tag to inject the necessary JavaScript for real-time updates. Previously, templates without a <head> tag would fail silently. The error message now clearly indicates which template needs to be fixed.

v2.3.2

🐞 Bug Fixes

  • Kirby 5 beta compatibility: Fixed compatibility with Kirby 5.0.0-beta.5, which introduced breaking changes to the Panel API. If you were experiencing issues with the preview not loading in Kirby 5 beta, update to this version.

v2.3.1

🐞 Bug Fixes

  • Device preview scaling: Device previews are no longer scaled up when smaller than the preview section container. Previously, mobile device previews (390px) could be upscaled when the preview section was wider, resulting in blurry rendering. Device previews now maintain their native resolution.

v2.3.0

🚀 Features

Live Preview section with device buttons
  • New tab button: New button to open previews in a new tab.
  • Device dimension buttons: Device dimensions buttons to simulate different screen widths. The height is fixed at 100% of the preview section. The available devices are:
    • Mobile: 390px
    • Tablet: 768px
    • Desktop: 1440px

v2.2.0

🐞 Bug Fixes

  • Site-level field preview: Unsaved content from site-level fields is now correctly rendered in the preview. Previously, when editing site fields (in site.yml), changes were not reflected in the preview until saved. Now, site-level content updates in real-time just like page-level content.

v2.1.0

🚀 Features

  • Preview alternate pages: The new pageId section property lets you preview a different page than the one being edited. This is useful for previewing how site-level changes affect a specific page, or for previewing template pages from a settings panel.
  • Improved sticky scroll behavior: Section height calculation for sticky previews has been improved, providing smoother scrolling behavior when editing content alongside the preview.

v2.0.0

Kirby Live Preview v2 is a major release with full support for Kirby 5. This major release requires a new license key. If you already have a license, you receive either a free upgrade to v2 or a 50% discount on your new license. Head over to the Kirby Tools Hub to get your discount or read more in the license compatibility guide.

🚀 Features

  • Kirby 5 compatibility: Full support for Kirby 5, including compatibility with the new Panel architecture and updated APIs.
  • Maintained Kirby 4 support: The plugin continues to work with Kirby 4 projects, allowing you to upgrade at your own pace.

v1.5.0

🚀 Features

  • Update strategy option: New updateStrategy to control the preview update behavior. If set to blur, the preview is updated when any Kirby text-like, number-like, or blocks field loses focus.

To change the default strategy from interval to blur, set the updateStrategy property in your blueprint:

sections/live-preview.yml
type: preview
updateStrategy: blur

v1.3.0

🚀 Features

  • Panel license activation: Activate and manage your license directly in the Kirby Panel without manual file editing. Click the activation link in the Live Preview section to enter your license details. Visit the Kirby Tools Hub to purchase or manage licenses.
  • Packagist distribution: The plugin is now available via Packagist, simplifying Composer-based installations. The private Composer repository has been deprecated.

v1.2.0

🚀 Features

  • Update interval option: Change rendering frequency with the updateInterval option or disable it completely.

🐞 Bug Fixes

  • Keyboard save shortcut: Saving with Cmd + S now works correctly when the focus is on the preview frame.

v1.1.0

🚀 Features

  • Permalink resolution: Resolve permalinks in writer fields to redirect links to the corresponding Panel page.
  • Frontend preview mode: Support detecting the preview mode in the frontend with the data-preview-mode attribute in CSS and JavaScript:
    assets/css/main.css
    [data-preview-mode] .cookie-banner {
  display: none;
}
    assets/js/main.js
    const isPreviewMode = document.documentElement.dataset.previewMode === "true";
  • Backend preview mode detection: Support preview mode detection in the backend with the previewMode content key:
    site/snippets/footer.php
    $isPreviewMode = $page->previewMode()->isTrue();

v1.0.3

Initial Release

Kirby Live Preview v1.0 brings real-time content preview directly into the Kirby Panel. See your changes rendered instantly as you edit, without switching between the Panel and your website.

🚀 Features

  • Real-time preview: Content updates are rendered in the preview iframe as you type, providing instant visual feedback.
  • Panel section: Add the preview section to any blueprint with type: preview. Works with pages and site blueprints.
  • Sticky layout support: Make the preview sticky in your blueprint layout for side-by-side editing alongside blocks and other fields.
  • Panel link navigation: Click links in the preview to navigate to the corresponding Panel page instead of the frontend URL.
  • Configurable refresh: Control the preview update behavior with the updateInterval option.

For setup instructions, see the Getting Started guide.