Code Screenshot Generator

Real-world use cases

• Make a Twitter / X cover for a bug-fix tweet

  You shipped a one-liner fix for a memory leak and want to share it on X. Paste the before/after snippet, switch to TypeScript, pick Tokyo Night + the Aurora gradient, click Download PNG, and drop it into the tweet draft. The 2x rasterized PNG renders crisp on retina and on Twitter's own card preview. No screenshot tool, no manual cropping, no Chrome window chrome bleeding into the frame.

• Blog post hero image for a "how the React compiler works" article

  You're writing a Medium / dev.to post and need a hero illustration. Paste the AST snippet, pick One Dark, set padding to 96 px, hide the macOS dots for a cleaner look, export PNG at 2x. The result is a self-contained image that looks identical on light and dark blog themes because the gradient panel carries its own background.

• Code-review comment with a highlighted offending line

  You spotted an off-by-one in a PR but want to be friendly about it. Paste the relevant 8 lines, click the line number of the bug to highlight it, copy the image, paste into the GitHub review comment. Reviewer sees exactly which line you mean, no "look at line 47-ish" gymnastics, no scrolling through the diff to find the spot.

• Talk slide showing 3-language comparison

  You're giving a Lightning Talk on memory models in Go vs Rust vs C++. Paste each snippet, swap the language and the theme, save 3 PNGs in a row, paste into Keynote / PowerPoint. Audience sees real syntax highlighting, not a screenshot of your IDE with the familiar-but-distracting chrome.

• README cover for a new open-source library

  GitHub's README markdown rendering is plain — your "first example" block looks like every other repo. Generate a polished PNG of the 5-line "hello world" usage, commit it to /docs/cover.png, embed at the top of README. First impression jumps from "another util" to "looks like someone cares". Costs you 30 seconds.

• Documentation site code example without a build step

  Your static site (Astro / Hugo / mdBook) doesn't have a syntax highlighter set up and you don't want to add one for 3 snippets. Generate each example as an SVG, commit them to /assets/code/, and embed via <img>. Zero runtime cost on the docs page, perfect rendering, no theme-switch race condition.

Common pitfalls

• Picking a low-contrast theme (Solarized Light on a pastel gradient) and then complaining that the screenshot is hard to read on a phone. If the OLED phone preview looks washed out, switch to a darker theme or pick the Midnight / Carbon background instead.

• Forgetting that JSX requires the JSX or TSX language preset — choosing plain "JavaScript" will color the angle brackets as comparison operators instead of as tags. Same trap for TypeScript generics inside .ts files; pick TS, not JS.

• Pasting a 200-line snippet and being surprised the PNG is huge. The image scales with the longest line and total line count. For readability cap each shot at ~40 lines and split logically — viewers won't read past 20 anyway.

• Using the "Copy image" button in a non-HTTPS context and getting a silent failure. ClipboardItem write requires a secure origin (https or localhost). Fall back to Download PNG → drag into the destination if you're on an http:// preview.

• Hiding line numbers and then asking your reviewer to "look at line 7". With line numbers off you took the address system away — turn them back on whenever you plan to refer to a specific line by number.

Privacy