We need to build a Live Preview feature into Payload so that editors can view updates on their front-end in real-time as they edit fields, without needing to save the document or navigate away from the admin dashboard. This will render a new "Preview" component directly alongside the document which will be used to render a website with live data on-the-fly.
How it will work:
Your website will be served within an iframe directly in the admin panel. As you make changes to your document, those changes are broadcast to the iframe via a postMessage event. Your website will then receive the event and re-render itself with the new data. Exactly how this is achieved will differ across front-end frameworks, but Payload will provide basic utility functions for the most popular ones, starting with Next.js.
What needs to be done:
The feature itself is relatively simple, but adjusting the admin UI to create extra space is not. Since the preview iframe will need to take up quite a lot of visual real estate, there is not enough room for everything that our admin UI requires. So to mitigate this, we may need to drastically rearrange the UI to maximize horizontal space. Simply collapsing the sidebar will not be enough. Instead, the sidebar will likely be replaced with a header nav (pending design exploration).
Other requirements:
Huge shoutout to @jpeiniger, @dkirchhof, @DennisSnijder, and their whole team for kickstarting this work with their visual editor plugin. It's received some great reception and will be looked to for inspiration as we integrate this feature into core.
Related: #997
Update from @jacobsfletch 8/23/2023
We've begun redesigning the admin UI to accommodate Live Preview as well as the preview interface itself. There's a separate discussion around that (including images 🤩) which can be found here: #3217. Feel free to jump into the conversation there as well.
Update from @jacobsfletch 9/21/2023
Admin 2.0 is done 🎉
and there's a POC of Live Preview demonstrated here: #3061 (comment)
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4
