Generate Pretty Code / App Screenshots šø
November 26, 2022ā¢1,131 words
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).
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:https://carbon.now.sh/9da07fe8b877801f7814424a00acbe90
4. Chalk.ist
Chalk.ist 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. 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.
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
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. 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.
14. Tweetlet
Tweetlet by Basharath is very similar to Poet, but also supports embedding code, images, text and Tweets.
General
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
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
APIs
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: Tango.us, ScribeHow, Minervaknows, etc.