Live editor

The live editor

In Kirby 6, the Panel preview view opens in the new Live editor mode: the rendered page on the left, the page's form with all its tabs on the right.

The preview always shows the changed version of the page. As you type, the Panel stores your changes on the server and reloads the preview automatically.

Four modes

Switch between four modes of the preview view:

• Live editor: The changed version next to the form
• Compare versions: The latest and the changed version side by side
• Latest version: Only the latest published version
• Changed version: Only the changed version

In compare mode, a toggle in the header keeps the scroll positions of both frames in sync.

Navigation stays in sync

The preview isn't a static screenshot. It's your site, and you can click around in it:

• Click a link to another page in the preview, and the whole view follows: the form switches to the linked page as well.
• Links to other domains and links into the Panel open in a new tab.
• Click the page title in the header to jump to any page via the page tree.

Sometimes you want to look at one page while editing another. Use the pin button in the preview header to make the preview and the form navigate independently. While pinned, clicking a link in the preview only changes the preview, and switching to another page in the form keeps the preview where it is. Unpin to bring both back in sync.

Preview in a second window

Got a second screen? In live editor mode, click the open button in the header to move the preview to a new browser tab, which you can drag to its own window, and the form in the main window takes up the full width.

Both windows stay connected: the second window reloads whenever you change content in the form, navigating in either window takes the other one along, and pinning works there too. Close the second window and the preview returns to the main window.

Viewport sizes

Buttons in the header let you check your page in different viewport widths. Sizes that need more room than your browser window offers are disabled. By default, you get three sizes:

Define your own sizes with the new panel.preview.sizes option:

return [
    'panel' => [
        'preview' => [
            'sizes' => [
                'phone' => [
                    'icon'  => 'mobile',
                    'width' => '375px'
                ],
                'tablet' => [
                    'icon'  => 'tablet',
                    'width' => '768px'
                ],
                'desktop' => [
                    'icon'  => 'display',
                    'width' => '1280px'
                ]
            ]
        ]
    ]
];