Codesandbox thumbnail configuration

Question

I have some codesandboxes showing the default-sandbox-thumbnail and others showing the thumbnail of the codesandbox right.

See the screenshot of my sandboxes list

It is not clear to me from what is depending

I have looked at the documentation to understand if i have to configure the sandbox.config.json but i have not found anything useful

How can i configure the thumbnail of my codesandboxes?

Answer 1

This is an existing bug for codesandbox, however i have found a temporary solution for the preview not showing. Take a screenshot of your code/project, rename it thumbnail.png and upload in the in the files

Answer 2

There's no built-in way to create a custom thumbnail, but I've found a workaround.

It's possible to change (update) the thumbnail by visiting https://codesandbox.io/api/v1/sandboxes/SANDBOX_ID/screenshot.png, where SANDBOX_ID is the ID of your code sandbox (you can find this by visiting the sandbox you want to customize, then get the last part of the link, e.g. https://codesandbox.io/s/`h8pG8`); codesandbox will visit your sandbox page and take a new sceenshot of your app and update your sandbox.

Here's the hacky part:
Just upload whatever image you want as the thumbnail to your sandbox, then in your homepage just temporarily display that image! You could just do something like:

<img src="/path/to/my/thumbnail" style="position: fixed; top: 0; left: 0; height: 100%; width: 100%; object-fit: cover; z-index: 100;" />

Then visit the endpoint (https://codesandbox.io/api/v1/sandboxes/SANDBOX_ID/screenshot.png); check your dashboard to see if the thumbnail changed.

(make sure to delete the image later!)