Capturing a screenshot with sandpack iframe.

[KevinEdry]

Hey,
I am building a dashboard app that runs Sandpack's preview as a component block within each dashboard.
One of the requirements for the dashboard app is to have preview image for each dashboard, so I have implemented html2canvas in order to capture an image of the Sandpack previews but I quickly figured out that this isn't really working since the iframe runs on a different domain.

"host the bundler..."

Well, I did host the bundler on a subdomain on my frontend app, but still getting the same result, an empty image without the iframe content.

Is the a way to capture a screenshot of the iframe content? I've really tried it all and could not figure out a way to do it.

[danilowoz]

I'm wondering if something like this would work. So, instead of you implementing this screenshot mechanism on your website application, you could implement it inside sandpack sandbox, which would capture the whole iframe content, and then you can send the data back using post-message between the iframe and main app.

Does it make sense?

[KevinEdry]

That could work for us, is there any docs for the post-message mechanism between the sandbox and the main app (or are you referring to a REST api POST request)?

P.S
Amazing job with the Excalidraw :D

[danilowoz]

You can try to send messages to the Sandpack preview using the Sandpack protocol, but I'm not it supports any kind of message. Otherwise, you can simply use an iframe postMessage and listen to the messages between the iframe and the main app:https://robertnyman.com/html5/postMessage/postMessage.html

[jamesmurdza]

This is interesting. Any progress here?