Generate Pretty Code / App Screenshots 📸

Published by Alicia's Notes 🚀, View original

Spice up your docs, blog posts and Tweets with some pretty screenshots!
The following is a list of 20 free tools, that will generate nicely formatted screenshots of code, device mockups and embedded info.

Code Screenshots

1. 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).


2. CodeImage

CodeImage, built by Riccardo Perra, and available on GitHub at riccardoperra/codeimage, let's you generate customized code screenshots, but also embed live code with support for multiple files.


3. Carbon

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:


4. is another clean and simple option, it too is open source (view on GitHub) developed by @Idered.


5. Snappify

Snappify is a snippet manager, but also includes a nice tool for generating screenshots. Login isn't required, but some extra features do need a user account. There's also a VS Code plugin, and the option to embed code into blog posts


6. CodeKeep

CodeKeep is another snippet manager, but what makes their screenshot tool unique is the many options for customization. You can add text, annotations, icons and include multiple snippets in a single screenshot


7. is great for social media posts, with a series of templates optimized for various websites. There are a range of themes to choose from, support for SVG exports, and many customization options. Developed by @iduspara, but not open source.


8. is great for clean and simple code snippets. A variety pf backgrounds, themes and fonts, and the ability to add an attribution link, as well as Gist import, unique links and SVG export. It's developed by Marco Slooten, and is not open source


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

9. Browser Frame

Browser Frame, developed by @pqvst creates clean and minimal web browser mock-ups, with a range of browser frames in both light and dark mode supported.


10. Screely

Screely, developed by @JurnW creates very simple browser mockups, with an optional background fill.


11. Mock up Phone

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.


12. Screenshot.Rocks

Screenshot.Rocks by @daveearley generates very simple browser and mobile mockups, with an optional background, shadow and controls.


13. 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.


14. 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.


15. Device Shots

Device Shots by @diogocapela let's you build colourful, annotated app screenshots.


Social Media Screenshots

16., 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.


14. Tweetlet

Tweetlet by Basharath is very similar to Poet, but also supports embedding code, images, text and Tweets.



17. Mockoops

Mockoops by Mohit Yadav lets you turn any screen recording (or image) into a beautiful animated video


18. Fabpic

Fabpic by Shadab Alam adds beautiful gradient backgrounds, drop shadow and borders to any image


19. SuperShots

SuperShots by Superblog is a simple tool to add gradient backgrounds to a picture. It's similar to PrettySnap, which also supports patterned backgrounds



Finally, applies custom patterned backgrounds, shadows, and border radius to images. It's made by @kanga_bru, and there's also a Windows App



21. API Flash


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.

Screenshot Apps

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. For Windows users, ShareX is super powerful

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.

Finally, the ImageMagick package includes a screenshot util with plenty of customisation options, and can be invoked from the command line (with import), or integrated into a script.

And if you need to create visual step-by-step guides, there's several extensions that will help with this, including:, ScribeHow, Minervaknows, etc.