Visual editing seems to be broken due to a cors error when generating screenshots. The error from the javascript console is included below. The content page is located here:
Access to fetch at ‘Builder.io: Drag and drop page builder and CMS’ from origin ‘https://builder.io’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.
Thanks for the post, we occasionally take screenshots to display in the History tab of the content and occasionally the screenshot API fails (CORS message is masking the real error). It is totally benign to the editing experience and is actually expected at the moment.
If you think something else is not working with the editor, please let us know!
I installed a chrome extension which eliminated the CORS error.
When editing the page, I am not able to see real time updates. I have developed custom code components that contain HTML in rich text fields. Previously, when changes were made to the field HTML content, the changes were shown in real-time. The changes are no longer shown in real-time.
I resolved this issue. It was a problem with the editing url page. I’m using React and next.js. I used this example as a starting point:
I was using a separate page for editing as recommended in the builder documentation. Removing the dedicating editing page seems to have resolved the issue. The next simple example contains a single page that seems to handle Builder.isEditing and Builder.isPreviewing correctly. If possible, please update the documentation to clarify whether a separate dedicated editing page is required for next.js.