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

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

Now, open the Panel and navigate to a page that uses the blueprint. You should see a new section called Live 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.

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']
    ]
];