Installation

Quick Start

Step 1: Install the Plugin

Download

After your purchase, you will receive a download link for the Kirby Live Preview plugin. Download the ZIP file and extract it to your site/plugins folder. It should look like this:

site/plugins/
├─ kirby-live-preview/
│  └─ … All plugin files

Composer v1.2.1+

The recommended way to install the plugin is via Composer. Since it's not available through Packagist, you will need to connect to our private repository repo.kirby.tools and authenticate your package download. Authentication is done via a license code that you can get from the Kirby Tools Hub after your purchase.

To get access to the private repository and enable Composer installs, follow these steps:

1. Go to hub.kirby.tools. Log in with the email you used for the purchase and the order number.
2. After successful login, a license code will be displayed next to the Composer repository configuration and a CLI command.
3. Copy and paste the Composer configuration into your composer.json file. This will enable Composer to resolve our plugins. Your composer.json file should include this repository item:
   composer.json

   {
     "repositories": [
       {
         "type": "composer",
         "url": "https://repo.kirby.tools"
       }
     ]
   }
   

4. Copy and run the Composer CLI command, which will generate an auth.json file for you, a Composer standard for authenticating against private repositories. Composer will send your license key (or license keys if you have purchased multiple plugins) as a bearer token with each request to repo.kirby.tools. As an alternative to running the command, you can create the file yourself. An auth.json file should look like this:
   auth.json

   {
     "bearer": {
       "repo.kirby.tools": "KT1-gd9Ymx30rM-ylZ3h6yF3l"
     }
   }
   

To install multiple plugins in one Kirby project, add all required license codes to your local auth.json file. Separate each license code with a comma, e.g:

{
  "bearer": {
    "repo.kirby.tools": "KT1-A, KT1-B"
  }
}

The Kirby Tools Composer repository is now set up. You can install the plugin by running the following command in your terminal:

composer require johannschopplich/kirby-live-preview

Last but not least, you can manage Kirby Live Preview like any other plugin, for example, download updates:

composer update

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: Enjoy Real-Time Previews

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.

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