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). If you want to preview a different page, you can specify the page ID using the pageId property. The page ID must be a valid page ID in your Kirby installation.
To preview a specific page with the ID about, use the pageId property:
type: preview
pageId: about
updateStrategy String
The page preview will rerender automatically when new unsaved content is detected. The updateStrategy property allows you to control how the preview is updated when changes are made to the content. The following update strategies are available:
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 change the default strategy to blur, use the updateStrategy property:
type: preview
updateStrategy: blur
updateInterval Number | Boolean
updateInterval applies to both strategies. Setting it to false only stops rerenders triggered by typing. The preview still renders when the section loads, on other Panel events, and on blur with updateStrategy: blur.The updateInterval property allows you to set the frequency at which the preview is updated. By default, the preview is updated every 500 milliseconds (0.5 seconds). You can adjust the update interval to a custom value in milliseconds (minimum 250ms). The value has to be false or an integer, and anything under 250 is lifted to 250; a negative integer or any other type throws when the section loads:
type: preview
updateInterval: 1000
To stop the preview from following your typing, set the updateInterval property to false:
type: preview
updateInterval: false
This can be useful if you want to manually refresh the preview by clicking the refresh button in the preview toolbar.
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.
To disable pointer events and prevent the user from interacting with the preview iframe, set the interactable property to false:
type: preview
interactable: false
aspectRatio String
The Live Preview section grows to fit the height of the Panel window. For certain use cases, you may want to set a specific aspect ratio for the preview area. This is useful when you want to simulate the aspect ratio of a specific device or screen size.
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.
To set an aspect ratio for the Live Preview, use the aspectRatio property:
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.