Generate Pretty Code / App Screenshots šŸ“ø

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. Ray.so

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

screenshot

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.

screenshot

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: https://carbon.now.sh/9da07fe8b877801f7814424a00acbe90

screenshot

4. Chalk.ist

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

screenshot

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

screenshot

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

screenshot

7. CodeImg.io

CodeImg.io 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.

screenshot

8. SnippetShot.com

SnippetShot.com 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

screenshot

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.

screenshot

10. Screely

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

screenshot

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.

screenshot

12. Screenshot.Rocks

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

screenshot

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.

screenshot

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.

screenshot

15. Device Shots

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

screenshot


Social Media Screenshots

16. Poet.so

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.

screenshot

14. Tweetlet

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

screenshot


General

17. Mockoops

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

screenshot

18. Fabpic

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

screenshot

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

screenshot

20. PrettySnap.app

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

screenshot


APIs

21. API Flash

screenshot

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: Tango.us, ScribeHow, Minervaknows, etc.


You'll only receive email when they publish something new.

More from Alicia's Notes šŸš€
All posts