• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

254
Vistas
Codesandbox thumbnail configuration

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

See the screenshot of my sandboxes listenter image description here

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?

about 3 years ago · Santiago Trujillo
3 Respuestas
Responde la pregunta

0

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!)

about 3 years ago · Santiago Trujillo Denunciar

0

Hi: I'm the one who created the GitHub issue codesandbox/codesandbox-client#2170 that you discovered and mentioned, which addresses this exact topic.

The "screenshot microservice" mentioned in the thread by CodeSandbox employees appears to not be working any longer (or at least not right now). If it did work, you could use a URL in this format to update the screenshot for one of your sandboxes:

https://codesandbox.io/api/v1/sandboxes/sandboxId/screenshot.png

According to your comment here, this is the URL you'd use to update the specific sandbox you mentioned:

https://codesandbox.io/api/v1/sandboxes/oxdod/screenshot.png

Because that officially-suggested method isn't working, your most direct route to an answer is to contact customer support using one of the options at the bottom of the CodeSandbox Frequently Asked Questions page. I suggest both sending an email AND opening a new public issue in the repo.

about 3 years ago · Santiago Trujillo Denunciar

0

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

enter image description here

about 3 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda