Getting Started
Step 1: Install the Plugin
Although it is a commercial plugin, you can download and test the plugin in your local environment before purchasing it.
Composer
The recommended way to install the plugin is via Composer. To install the plugin, run the following command in your terminal:
composer require johannschopplich/kirby-live-preview
- Remove the
repo.kirby.tools
private repository configuration from yourcomposer.json
file and runcomposer update
to install the latest version of the plugin. - Open a Panel page that contains the Live Preview section.
- Your license key is is automatically migrated from the
auth.json
file in your root directory to the new location in the/site/config/.kirby-tools-licenses
file. - Update your
.gitignore
file to exclude the new license file.
auth.json
file from the root directory.Download
Head over to the releases page and download the latest version of the plugin as a ZIP file. Extract the contents of this ZIP file to your site/plugins
folder. It should look like this:
site/plugins/
├─ kirby-live-preview/
│ └─ … All plugin files
Step 2: Blueprint Setup
Select a site or page blueprint to which you want to add the Live Preview section. Add the following section configuration to the blueprint file:
sections:
livePreview:
type: preview
Step 3: Customize the Live Preview
Fit the Live Preview section to your blueprint layout and customize it to your needs: It can be part of any column and can even be sticky. The latter is useful for previewing content changes side-by-side with blocks or other fields:
columns:
- width: 2/3
fields:
blocks:
type: blocks
- width: 1/3
# Make the preview sticky
sticky: true
sections:
livePreview:
type: preview
Now you see a rendering of the page content. It updates as you type:
Try navigating through the preview – if you click on a site link, such as in the header, the corresponding Panel page will open instead of the link in the preview.
For mor configuration options, see the Configuration guide.
Step 4: Buy a License
You can test the plugin locally. However, you need to purchase a license to use the plugin in production environments.
Visit the product page on Lemon Squeezy and purchase a license. Then, open any Panel page that contains the Live Preview section. Click the Activate link to open the activation form:
Enter the email you used for the purchase and the order number and hit the submit button. Done! Thanks for supporting our work. Once you activate your license, the license activation buttons will disappear.
/site/config/.kirby-tools-licenses
file. Make sure to add this file to your .gitignore
file to keep your license key private.Troubleshooting
Live Preview in Safari
Due to security restrictions, Safari requires additional configuration to allow the Live Preview iframe to communicate with the Panel. To ensure the Live Preview works in Safari, add the following configuration to your config.php
:
return [
'panel' => [
'frameAncestors' => ['self']
]
];