Turn syntax-highlighted code into a shareable PNG with a custom theme and window chrome.
The Code Screenshot Generator turns a snippet of source code into a syntax-highlighted PNG with optional window chrome, padding, and a background gradient. It supports any language that Prism or highlight.js recognises, which covers everything from JavaScript and Python through to Rust, Elixir, and SQL. The output is a clean image suitable for blog post bodies, social posts, documentation, and slide decks.
The category has been dominated by carbon.now.sh and ray.so for years, both of which are excellent in-browser tools but have no API. This generator runs server-side and can be called from a build pipeline, a publishing hook, or a CMS workflow, which is what most engineering content teams need once they move past hand-screenshotting every snippet. Pass the code, the language, and the styling options as JSON, and the response is a hosted PNG URL you can paste into a post body or attach to a tweet.
Drop the snippet into the code field and select the language from the dropdown. The list covers every language Prism supports natively, plus a few additions like Elixir, Crystal, and Nix that get added through plugins.
Pick from the built-in themes (One Dark, Dracula, Solarized Light, GitHub, Night Owl, and a handful of others) or supply a custom theme by passing a CSS variables block. The themes match their VS Code counterparts closely enough that they read consistently between editor and screenshot.
Toggle the macOS-style window chrome on or off, set the padding around the code block, and pick a solid colour or gradient background. The defaults produce a clean screenshot that reads well on both light and dark social feeds.
Download the PNG for use in slides or design tools, or copy the hosted CDN URL into a blog post markdown image, an email, or a social post. The URL stays valid for as long as the underlying snippet does not change.
Technical blogs that publish dozens of code snippets per post benefit from a single consistent rendering style across the site. Render each snippet through the API at publish time, store the URLs alongside the markdown, and the post reads as one coherent piece rather than a patchwork of differently themed screenshots.
Developer relations teams that share code on X benefit from screenshots that read in the timeline rather than raw GitHub embed previews. Render the snippet, attach the PNG to the post, and the code is legible at thumbnail size without anyone clicking through to the repo.
Docs sites that want their code snippets to appear in OG cards and social previews can render a screenshot of the canonical example and use it as the og:image for that page. The share card then shows the actual code rather than a generic docs logo.
Speakers who present a lot of code benefit from screenshots that match across slides without manually re-styling each one. Render every snippet through the API with the same theme and padding, drop them into the deck, and the talk reads as one consistent visual treatment.
Developer newsletters delivered as email cannot rely on code highlighting working in every client. Render each snippet as a PNG, embed the image, and the code displays consistently in Gmail, Outlook, Apple Mail, and the dozen smaller clients that handle inline CSS badly.
The defaults for most engineering blogs. Dark theme, traffic-light controls in the top-left, modest padding, and a deep navy background.
Stripped-down output for embedding inside docs pages or technical PDFs where the surrounding page already provides context.
Higher-contrast option for social posts. Solarized Dark code on a purple-to-orange gradient, well-suited to talk announcements and conference promotion.
Long snippets shrink below a readable point size when the renderer scales them to fit. Trim to twenty lines or fewer where possible, and break a longer example into a sequence of smaller screenshots rather than one tall one that nobody can read.
Subtle low-contrast themes lose detail when X or LinkedIn re-compress the image for the feed. Higher-contrast themes (One Dark, Dracula, GitHub) survive the round trip better than low-contrast ones (Solarized Light, GitHub Light), so favour them for content destined for social.
JetBrains Mono and Fira Code render ligatures (the connected arrow in =>, for example) that some readers find clearer and some find distracting. Pick a side and stick with it across all your screenshots, since switching mid-thread is more jarring than committing to either default.
Default-DPI renders look soft on retina laptops and modern phones. The 2x DPI option doubles the pixel dimensions without changing the rendered point size, which produces crisp output everywhere at the cost of a roughly 4x larger file.
The hosted CDN URL for a rendered snippet does not change unless the underlying code does, so set long cache headers on any wrapping CDN or front-of-app cache. Re-render only when the code itself moves, and update the URL with a cache-busting query string at that point.
Beautiful syntax-highlighted code screenshots with window chrome
Generate share-ready images sized for Twitter/X posts
Editorial hero images for blog posts and article pages
Generate course completion certificates with recipient name, date, and signature.
Render an invoice as a PNG to embed in email bodies without forcing a PDF attachment.
Build a 1200 by 630 share card from a page title, subtitle, and brand colours.
The Code Screenshot Generator runs on the HTML to Image API. Call the same renderer from your own code with a free account. 25 renders a month on the free tier. See the pricing page for higher-volume plans.