Live preview for the Panel#15

It would be great to have a way to preview all content changes immediately side by side to the Panel.

Tina cms does this very well: https://tinacms.org/

Personally, I must say that I never saw a convincing version of a live preview in a CMS and always found two separate tabs/windows easier to handle. It’s very hard to get this right. So I’m not sure this is well suited for the core but – that said – I imagine it’s a good candidate for a plugin.

@Gareth Jones if I understood the architecture of Tina correctly, it’s all based on react components. This way the live updates are super easy to do because you can do it on the client-side. In our case, we have to render changes on the server, which makes it more tricky, but not impossible.

@Nils Hörrmann I agree that it’s hard to get it right. I’d also prefer a really solid solution instead of just having this kind of feature as selling point, but it never really works properly.

@Bastian: From my experience it’s usually a “wow” feature when you start a project but I don’t see the need in most our projects when thinking of actual content editing. This might be different for other developers, I just wanted to point out that this might be a time sink with relative little gain in the end.

@Bastian yes true, but Craft and even Shopify do it pretty well. I don’t think it really needs to be live reloading.

@Nils Hörrmann I am torn on this too, but I know clients are now used to wix, squarespace,shopify, big cartel etc. and they all have versions of a preview. We are dealing with people that have 20 tabs open with the site in it and close the panel tab down every 5 mins by mistake haha!

I think this problem is solved by the new builder with which you can output the preview individually.

Thanks, link?

It’s still in development by the kirby team! I think they will make a announcement when it’s ready. Or check discord: https://discord.com/channels/525634039965679616/761608160565133343

Ah ok, great! It looks like a good addition but not a substitute for a live preview. Hate to draw on the competition but if you look at how both Craft and Statamic do live preview (via Vue, I believe) it works very well.

I’ve just had another conversation with a long standing client who has a very old custom CMS with a live editor (not a page builder). I’ve talked with them about upgrading for sometime. We had another conversation about the live preview feature (using Craft as an example) today. For them, it is a ‘must have’ so they can visualise what impact their changes will have before comitting. The impression I get from them and others in the same position is that, if their system has this feature now, losing it would feel like a step backwards. This would be really great feature.

So we used to have a preview tab for the old builder field plugin (<= Kirby 3.5.x). But now with the new core blocks field, we don’t have the option anymore. I am working on a live preview plugin (without saving data to the page) for the blocks field, which already has come a long way and which will be open source soon. For our use cases this is pretty much enough, since we mostly create sites for clients, where individual pages are contructed with blocks. But I think using similar techniques it should be very possible to create a whole page live preview.

Any news? I found forum posts about a planned live preview for 3.3.0, but it was postponed.

There’s the new Live Preview plugin for Kirby 4 that solves this issue: https://kirby.tools/live-preview

Features:

• Unsaved content: See changes before they are saved.
• Panel redirects: Site links in the preview will open the corresponding page in the Panel.
• Section behavior: Place the preview section where you need it. It will match the surrounding layout.