Five New Optimizely Certifications are Here! Validate your expertise and advance your career with our latest certification exams. Click here to find out more
AI OnAI Off
How to show the drafted changes real-time on a project built with React components
Hi,
I’m not very familiar with Dojo, but I’ve been trying to understand how the new side-by-side editing addon is coded.
I came across the AutoRefresher.js file (link), and if I understand it correctly, it seems to do exactly what you need—it refreshes the content inside the preview window every time a page is saved.
Maybe it will solve your problem, or at least it will be a good start.
Mar 21, 2025 9:27
Many thanks for the answer. The AutoRefresher.js file has the event I was searching for. Let me try this in my project to see the impact.
Mar 23, 2025 11:09
I have a project that uses Optimizely CMS 12.32.x. The project uses React server components for parts of the frontend.
One drawback of this implementation is that the pages in the preview mode is not rendering the content with drafted changes instantly after making the changes. Suppose, I have a block with a text field. When visiting the block in the preview mode, if I update the text field, the preview mode does not reflect the changes. I need to either publish the block or reload the page to see the draft. I understand this is how the server components work.
I was trying to find ways to re-render the React component once the changes have been "Autosaved" as a draft. I was hoping to subscribe to the event that fires inside the Dojo when the draft is saved. I tried the events listed in this blog - https://gregwiechec.com/2015/08/using-dojo-topic-publish-and-topic-subscribe/. However, I did not find the event I needed. I am also unsure what would be the ideal way to re-render the react components.
Can anyone tell me if this is the right approach? Are there any easier alternatives? Thank you.