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!

But even Squarespace and similar services struggle if you are doing something layout-wise that’s not common and was not anticipated. Is Kirby actually competing with Squarespace? I don’t know. But I really think it would be better to develop this as a plugin first and see how that works out. And again, that’s just a single opinion from my personal experience.

Maybe not competing with squarespace - but clients often try these cheap builders first. I am really not sure either, but I know it will help sell kirby and this should be a consideration too.

I would not use a plugin for this tbh, because it would become cricital to the clients experince so would be a problem to say it no longer works in version x as the plugin is no longer maintained.

Fair points!

As someone potentially coming from Statamic this is almost a must-have for me. It’s most useful for writing editorial content like blog posts, where the look and feel of a post is very important, so I use live preview all the time in that respect.

End-clients also need to visualise things which is why Squarespace is such a hit.

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.