An Astro integration for generating screenshots of your pages automatically at build time
Generate screenshots of your Astro pages automatically at build time with Astro Snapshot. Perfect for creating social images, content previews, dynamic icons, and more!
This integration was inspired by astro-selfie and a similar plugin I wrote for Gatsby called Gatsby Plugin: Component to Image. Compared to astro-selfie, this integration exposes a lot more configuration options which allow you to completely customize how images are generated.
- 🧩 Framework agnostic: Generate images from any valid Astro page
- Unlike other integrations for generating social images, not limited to preset layouts
- Unlike Satori, not limited to certain types of JSX elements or CSS properties
- Use whatever front-end framework you want
- 📸 Customizable outputs: Full control over the generated images
- Generate multiple images per page with different configurations
- Save images to
public,dist,src, or any other directory - Save PNG, JPEG, or WebP images, with the format automatically detected from the output filename
- Save images at any resolution
- Choose whether to overwrite existing images or skip them
- ⚙️ Flexible configuration: Advanced options for power users
- Define global defaults to keep configs minimal and override them on a per-image basis
- Pass through options directly to Puppeteer for precise control of the browser, viewport, and screenshot generation process
- 🔧 TypeScript support: Full type safety for all options and functions
- Import types from the package to make sure your config is correct
- Install the package from JSR for use with TypeScript-native runtimes like Deno
- 🏞️ Social images: Use your existing front-end components to generate Open Graph images and/or Twitter cards for your blog posts or other content
- 📰 Content previews: Generate screenshots of your website for use in documentation, marketing materials, showcases, etc.
- 🖼️ Favicons: Dynamically generate favicons for your website
For installation and usage instructions, please see the docs.
Need help? See the support resources for information on how to:
- request features
- report bugs
- ask questions
- report security vulnerabilities
See the troubleshooting page in the docs for a list of common issues and their solutions.
Want to help out? Pull requests are welcome for:
- feature implementations
- bug fixes
- translations
- documentation
- tests
See the contribution guide for more details.
Copyright © 2026 John Goodliff (@twocaretcat).
This project is licensed under the MIT license. See the license for more details.
We are not affiliated with or endorsed by Astro.
Other projects you might like:
- 👤 Gatsby Plugin: Component to Image: A similar image generation plugin for the Gatsby framework.
Notable projects that depend on this one:
- 👤 Tally: A free online tool to count the number of characters, words, paragraphs, and lines in your text. Tally uses this integration to generate social images.
Similar projects you might want to use instead:
- 🌐 astro-selfie: A similar integration that automatically generates images for every page.
Find this project useful? Sponsoring me will help me cover costs and commit more time to open-source.
If you can't donate but still want to contribute, don't worry. There are many other ways to help out, like:
- 📢 reporting (submitting feature requests & bug reports)
- 👨💻 coding (implementing features & fixing bugs)
- 📝 writing (documenting & translating)
- 💬 spreading the word
- ⭐ starring the project
I appreciate the support!
