Custom preview url

[mattickx]

A couple of years ago I've managed to run Decap CMS with custom preview links (iframe + passing data to it):
decaporg/decap-cms#2183 (comment)

Would something similar be possible today with sceltia-cms ?

[kyoshino]

Hi there 👋🏻 I was actually trying to implement an ifame preview a few months ago. There were some issues, but will take a look again.

[mattickx]

Hi there 👋🏻 I was actually trying to implement an ifame preview a few months ago. There were some issues, but will take a look again.

Great! Thank you very much.

I'm not too familiar with the underlying structure, but I noticed that CMS.registerPreviewTemplate is not compatible.

Here's what I basically achieved and want to reproduce with Sveltia CMS:

• Make it possible to customize the preview URL per collection.
• Render the preview with an iframe, passing data of the current open file and updating it when editing.

If this becomes part of the project for official support, that would be even better!

[kyoshino]

Yeah, CMS.registerPreviewTemplate is not yet supported in Sveltia. I was thinking about enabling an iframe preview by simply configuring a preview URL, without using the method. IIRC, I encountered at least 2 issues:

• It may be difficult or impossible to preview a new entry draft (an existing entry is fine) because the data is not saved and the entry URL/slug is not determined yet
• The previewed page may be reloaded for every single change/keystroke unless the framework’s hot reload works well

Will dive into it further.

[mattickx]

I encountered at least 2 issues:

• It may be difficult or impossible to preview a new entry draft (an existing entry is fine) because the data is not saved and the entry URL/slug is not determined yet

As you can see in my old example, with NetlifyCMS you had access to the current editing data. Not sure if this is available in Sveltia.
I used that data and put it in a variable on the window object.

• The previewed page may be reloaded for every single change/keystroke unless the framework’s hot reload works well

Will dive into it further.

Since the preview is rendered with an iframe, you can access a variable in the parent's iframe DOM's window.
Inside my own project (using the CMS) I've set an interval on my preview page that retrieves the parent's iframe data and updates the view.

---

This way, there's no need for the CMS to refresh or rerender anything, especially not on each keystroke.
Instead, you could update the variable in the CMS DOM's window only when necessary (on blur or some other event).

On the user project side, for standardization and ease of use, the polling of the content on the preview page could be hidden behind a utility function in a module or SDK.

[bummzack]

I've just discovered this project and I'm delighted about it. We are big fans of Svelte and we also used Netlify/Decap CMS in some of our projects. Having a preview was always one of the features we missed the most…

I think an iframe should work, but I would suggest to use the postMessage API for communication.

I imagine something like this:

• each collection can have a preview URL, ideally with dynamic parts, such as https://example.com/page/{{slug}}?preview=true, where {{slug}} would be replaced with the slug property from the current collection entry.
• if specified, the preview URL is loaded in an iframe (instead of the default preview)
• Whenever content is changed in the CMS, the updated content is sent to the iframe window via postMessage.
• The frontend running in the preview iframe could then listen to message event and update data dynamically.

I think this would be an approach that should work with quite a lot of stacks/frameworks/etc.