Configuration
Section Properties
label String
The label property defines a custom label for the Live Preview section. The default value depends on the Panel language. For English, the default label is Live Preview.
To set a custom label, use the label property in your blueprint:
type: preview
label: Real-Time Preview
pageId String
By default, the Live Preview section displays the current page being edited in the Panel (or the home page if it is being rendered at site level). Set pageId to preview another page by its ID:
type: preview
pageId: about
On the site blueprint, that page shows the site's unsaved changes. On a page blueprint, another page renders as saved.
updateStrategy String
Defaults to interval; any other value falls back to it. The strategy decides when unsaved changes rerender the preview:
interval: The preview is updated at theupdateInterval.blur: The preview is updated when any element in the Panel loses focus and the content changed since the last render. Use it when rerendering while the editor types is too expensive.
To switch to blur, use the updateStrategy property:
type: preview
updateStrategy: blur
updateInterval Number | false
Defaults to 500 milliseconds – the minimum time between two rerenders, with both strategies. Anything under 250 is lifted to 250. A negative integer or any value other than an integer or false throws when the section loads.
To set a custom interval in milliseconds, use the updateInterval property:
type: preview
updateInterval: 1000
To stop the preview from following your typing, set the updateInterval property to false:
type: preview
updateInterval: false
The preview still renders:
- when the section loads
- when the page title changes
- when files are sorted
- when the Panel language switches
- when an editor clicks the rerender button
- on blur, with
updateStrategy: blur
interactable Boolean
Enabled by default – editors can click links and buttons inside the preview. Set it to false to make the preview inert – the page gets pointer-events: none, so clicks and hovers no longer reach it. A site rule that sets pointer-events with !important wins over it.
type: preview
interactable: false
aspectRatio String
The Live Preview section grows to fit the height of the Panel window. Set aspectRatio to give the preview area a fixed ratio instead.
The aspect ratio value must be a string formatted as width/height (e.g., 16/9). Any other string, 16:9 included, throws when the section loads.
type: preview
aspectRatio: 16/9
help String
Like most other Kirby fields and sections, you can define a help text for the Live Preview section. The text is displayed below the preview window and supports Kirbytext formatting.
type: preview
help: |
The Live Preview section shows a real-time preview of the content as you type. It updates automatically and provides a live rendering of the page content.