November 26, 2022•851 words
Spice up your docs, blog posts and Tweets with some pretty screenshots! The following free tools will generate nicely formatted screenshots of code, device mockups and embedded info.
Ray.so developed by the team behind Raycast, generates clean and minimal code screenshots.
You can also specify options via GET URL params, so you could programatically generate an image (e.g. using this shell script, or this VS Code extension).
Carbon has more advanced styling options. It's open source (view on GitHub) and developed by @mfix22.
You can also directly generate an image from a GitHub Gist, by passing the Gist ID in the URL, for example:
VS Code Extensions
While we're on the topic of code screenshots, I have to mention a few really neat IDE extensions which help you take great screenshots, directly from VS Code.
Browser / Device Screenshots
Mock up Phone by Authgear has a range of different mobile, tablet, laptop and large screen device frames, which are easy to upload images into. But keep in mind the screenshots ratio must be correct to avoid it being stretched.
9. The App Launchpad (requires sign up)
Unlike other options on this list, The App Launchpad does require sign up, but it's free to use. It's a tool that makes it easy to build beautiful screenshots for your app, optimised for publishing to Google Play and the Apple Store.
10. Magic Mockups
Magic Mockups, developed by Kaspars Sprogis is an older tool, but still very useful if you want to generate mockups displayed on a physical device in real-life situations. Note that your screenshot needs to be exactly the right ratio, to avoid it being stretched or cropped.
11. Device Shots
Social Media Screenshots
Poet.so, built by Callum Mckeefery generated beutiful embeded social media posts. It supports content fetched from Twitter, LinkedIn and Shopify, and has several themes and customization options.
Tweetlet by Basharath is very similar to Poet, but also supports embedding code, images, text and Tweets.
Fabpic by Shadab Alam adds beautiful gradient backgrounds, drop shadow and borders to any image
Finally, SuperShots by Superblog is a simple tool to add gradient backgrounds to a picture
There's plenty of screenshot API services out there, but API Flash is one that I've personally used across countless projects. You can generate a URL which resolves to a screenshot of your website and pass in parameters to configure it (like custom CSS, element selector, device + resolution, timeout delay, no ads / cookie banner, etc).
Although you only get 100 scr/ month on the free plan, there's an option to set the cache time, which makes it easy to stay within that limit.
Flameshot is a free and open source (here on GitHub), cross-platform (C++ for Win, Mac and Linux), highly customisable desktop screenshot app. It's simple to use, includes some nice features like an in-app screenshot editor, and most importantly has an integrated command line interface.
If you use Firefox, you can capture screenshots right from your browser. Just right-click on any part of a website and select "Take Screenshot" (or Ctrl + Shift + S). From here, you can either capture the entire page, a selection, or specific HTML nodes.
Gimp can also take screenshote (although it needs to e launched first), just navigate to File --> Create --> Screenshot, select your options, and hit Snap.