Live Preview #3061
Replies: 9 comments 17 replies
-
|
Looking forward to this becoming a core feature ❤️ |
Beta Was this translation helpful? Give feedback.
-
|
Can we make this preview window popout-able? Use case: On a laptop, you have a very limited amount of screen space and one of the most common usability features is alt-tabbing or virtual desktops so you can quickly switch between windows; the other one I use a lot is picture in picture. Technical solutions:
|
Beta Was this translation helpful? Give feedback.
-
|
@paulpopus this is 🔥 |
Beta Was this translation helpful? Give feedback.
-
|
Very cool! I think it needs to be by default in the same window |
Beta Was this translation helpful? Give feedback.
-
|
The extension of pip sounds great :) |
Beta Was this translation helpful? Give feedback.
-
|
Just a quick test 🙃 visual-editor.webm |
Beta Was this translation helpful? Give feedback.
-
|
Yeah UI is indeed the big question. I think we need to draw some inspiration from some other visual editors like: Webflow, Elementor, Wix etc.. It would also incredibly beneficial to send back the data within the live preview, allowing developers to create their own editing tools on top of it, for instance:
By following this approach, developers can seamlessly integrate the live preview functionality into their applications, empowering users to make real-time changes without having to switch between different editing modes. This enhances the overall user experience and simplifies the editing process. There is also the option to support/create the necessary edit components, but that's framework dependent, better to be left to the community. Other thought is that we draw inspiration from https://vercel.com/docs/workflow-collaboration/visual-editing and use source maps to map the data and extend it with an overlay. |
Beta Was this translation helpful? Give feedback.
-
Hey @matthijs166 check this out 😉 https://payloadcms.com/docs/integrations/vercel-visual-editing Whether its with Vercel or not, this is 100% the end-game. We will absolutely be building tools so we can send data both ways. It's much more tricky to go front-end->Payload though in a nice and elegant way that doesn't require serious overhaul of your components, i.e. Rich Text. |
Beta Was this translation helpful? Give feedback.
-
|
Do you plan to allow the user to edit everything or just text / richt text fields? I can imagine that editing plain text fields (for example by using the contenteditable attribute) would be fine. For the preview window, I implemented the first messages, which will be send from the frontend to the cms. |
Beta Was this translation helpful? Give feedback.
-
Yea that's the tricky part here @dkirchhof, there needs to be as little manual effort as possible. This is why Vercel Visual Editing works well, they render hidden, encoded values into the front-end so that there is little to no integration needed. When these values are detected on the front-end, they overlay their own proprietary editor overtop so you can easily navigate back and forth between the CMS and the front-end. BUT this is not true visual editing, because as of now nothing is marked |
Beta Was this translation helpful? Give feedback.
-
|
@jacobsfletch Are you planning to release Vercel Visual Editing integration for non-enterprise customers? |
Beta Was this translation helpful? Give feedback.
-
|
And another test: visual-editor_select_input_2.mp4 |
Beta Was this translation helpful? Give feedback.
-
|
love it! |
Beta Was this translation helpful? Give feedback.
-
|
And the other way around (select input => scroll to element in preview and highlight it): visual-editor_select_input_back_and_forth.mp4 |
Beta Was this translation helpful? Give feedback.
-
|
Love it! It'd be interesting to know how Vercel's visual editor deals with more complicated data types than string, or translated/processed values. |
Beta Was this translation helpful? Give feedback.
-
|
We'll be discussing Live Preview and Admin UI improvements today in Discord. https://twitter.com/payloadcms/status/1694047842560573569
|
Beta Was this translation helpful? Give feedback.
-
|
Admin 2.0 has been completed! This has unlocked some major progress to Live Preview. Not quite ready to open a PR for this yet, but you can follow along this branch for updates. Here's a sneak peak 😏: payload-live-preview.mp4 |
Beta Was this translation helpful? Give feedback.
-
|
When I implemented the windowed preview in our plugin, I added a post message "channel" which is used to send message from the frontend back to payload. This is used to notify the CMS that the frontend is ready to receive updates. Payload will send immediately the current document afterwards. This is just to prevent the "loading..." message before any changes made in the editor. |
Beta Was this translation helpful? Give feedback.
-
|
@dkirchhof yea 👍 that is exactly what the That loading message is actually related to the popup window not being ready before the initial post message is broadcast to it here: https://github.com/payloadcms/payload/pull/3382/files. I just wanted to share this before getting in the weeds with a fix for this. Also, I did just draft a PR to make it easier to follow along: #3382 |
Beta Was this translation helpful? Give feedback.
-
|
Quick update here, Live Preview has been scaffolded out at a high level: #3382. We're mainly through UI at this point (still a lot of refinements to be made here though). But we also have a lot of the patterns in place to begin finishing the API portion of this work, i.e. the |
Beta Was this translation helpful? Give feedback.
-
|
That's awesome @jacobsfletch. Looking forward to it, as the API portion at the moment is a tricky part in the current plugin. E.g. getting relations inside of richtext and stuff like this. 😅 |
Beta Was this translation helpful? Give feedback.
-
|
Incredible work @jacobsfletch 👏 Can't wait to use it! One question that I always had about this feature is if it will work in a multiple-tenant project with different domains. |
Beta Was this translation helpful? Give feedback.
-
|
@franknoel hmmm this seems possible, we would just need to swap out the iframe src depending on the value the document's tenant. I can dive deeper into this some time, good call 👍 |
Beta Was this translation helpful? Give feedback.
-
|
Big update here prior to the weekend: the data side of things is mostly complete! Andddd its written in a way that is very composable. This is the part that I'm most excited about. This will enable us to support any front-end framework, not just React. Essentially, we've abstracted the core functions out of the
This might also be the last update I make to this thread. This feature will be rolling out in beta next week! 😱 🚀 |
Beta Was this translation helpful? Give feedback.
-
|
Great work! Looking forward to playing around on Monday. 💪 |
Beta Was this translation helpful? Give feedback.
-
|
Congratulations! Fantastic work!🚀 |
Beta Was this translation helpful? Give feedback.
-
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
postMessageevent. 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)
Beta Was this translation helpful? Give feedback.
All reactions