Readable code for social and docs
Code Screenshot Generator
Turn code and diffs into crisp, syntax-highlighted cards with adjustable font size, width, chrome, background and export ratio.
Open workflowFrom source to finished image
Paste code
Choose from common languages or use the dedicated diff highlighter.
Make it readable
Adjust font, editor width, line spacing, theme and window chrome.
Export anywhere
Create a landscape post, square card, story or custom-size asset.
Diff highlighting
Added and removed lines remain visually distinct.
Multiple code fonts
Use clear monospace families designed for small and large exports.
Reusable styling
Save the finished composition as a personal template or shared theme.
What you can do with it
Screenshots of code pasted straight from an editor are usually too small to read once they're scaled down for a feed. This tool renders your snippet as a self-contained card you fully control — font family and size, editor width, line spacing, window chrome and background — so the code stays legible at the size people actually view it. A dedicated diff mode keeps added and removed lines visually distinct, which is what makes before/after posts and pull-request highlights read at a glance.
Frequently asked questions
- Which languages are supported?
- All common languages are syntax-highlighted, and there's a separate diff highlighter for showing changes.
- Can I show a git diff?
- Yes. Diff mode keeps added and removed lines colour-coded so before/after changes are easy to follow.
- Can I reuse the same style across posts?
- Save the composition as a personal template or export its theme JSON, then apply it to future code cards for a consistent look.