Installation – Kirby Tools

Quick Start

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

Prior to v1.3, the plugin was published on a private Composer repository. It is now available on Packagist and can be installed without authentication. Your license key remains the same and is still required in production environments. To migrate your license key to the new location, follow these steps:

Remove the repo.kirby.tools private repository configuration from your composer.json file and run composer 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.

You can now delete the 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:

pages/default.yml

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:

pages/default.yml

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:

Kirby Live Preview panel example

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.

Your license key will be automatically stored in the /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:

config.php

return [
    'panel' => [
        'frameAncestors' => ['self']
    ]
];

Configuration

All the blueprint configuration properties for the Live Preview section.