Thread tagged as: Suggestions, Discussion

Live Preview (July 2018 update)

I've suggested this before, but the idea was dismissed at the time. Since I can't re-open the thread, I just wanted to add another example I found, where the concept seems to be useful, in an attempt to convince :)

Statamic enables live preview through VueJS, showing you the site changing as you type, which you can see on their homepage — under the 'See it in action' heading.

'Live' preview now seems to be a common feature amongst lots of CMS', as well as excellent UX.

Statamic, Craft and WordPress (via Gutenberg) now have some variety of a 'live' editing experience where you can see the front-end of a website live updating as you interact with the admin.

Jay George

Jay George 2 points

  • 3 years ago

Hi Jay. I haven't tried the live preview in those other CMS's. How does it compare to saving a Perch update as a draft and viewing that?

You should view their demos. It’s nothing like the same! For me, the above mentioned live editing experience is an example of great modern UX.

On the flip side—saving, then reloading a page to see changes, simply fulfills minimum requirements.

I like Live Preview when I've seen it on some other CMS sites. One potential problem is that it's only a representation of the site at the Preview window width and does not take into account mobile devices. Having said that, WordPress customiser, for example, does have "mobile", "tablet" and "desktop" modes (which effectively just reduce the preview window width).

I've used Live Preview with Perch and SimpleMDE a few times. Seems good.

Statamic has a slider you can drag to change the preview width, just like you can do with DevTools. I think Craft May have this too.