Code Screenshot Generator
Paste a snippet, pick a theme (Midnight, Sunset, Ocean, Forest, Blush, Graphite) and a language (TypeScript, JavaScript, Python, JSON, HTML, CSS, Bash, SQL, plain). Renders to canvas with macOS-style window chrome, filename title, line numbers, configurable padding and font size. Copy PNG to clipboard or download — 100% offline.
What is the Code Screenshot Generator?
Code Screenshot Generator renders a code snippet to a PNG using the canvas API. Six themed gradient backgrounds (Midnight, Sunset, Ocean, Forest, Blush, Graphite) each define their own background gradient, window chrome and per-token colours. The syntax highlighter is hand-written (no Prism / Shiki — keeps the page bundle tiny) and covers TypeScript / JavaScript (with type-name distinction), Python, JSON (key vs value), HTML (tag/attribute/value), CSS (property/value/colour), Bash (variables, flags), SQL (case-insensitive keywords) plus a plain mode. Output is rendered at 2× scale for crisp Retina downloads. The macOS-style title bar shows your filename and three traffic-light dots, with optional line numbers and adjustable font size and padding. Click 'Copy PNG' to put the image straight on your clipboard, or 'Download PNG' for a file you can attach to a tweet or blog post.
How to use it
- Paste your code snippet into the text area.
- Pick the language so the highlighter knows what tokens to colour.
- Choose a theme, type a filename and tweak font size / padding to taste.
- Click 'Copy PNG' for clipboard, or 'Download PNG' for a file.
Benefits
- Six hand-tuned themes — light to dark, each with matching token colours.
- Hand-written highlighter for TS/JS, Python, JSON, HTML, CSS, Bash, SQL — no Prism, no Shiki, no slow first paint.
- Renders at 2× scale for sharp Retina exports.
- macOS-style window chrome with traffic-light dots and a filename title.
- Optional line numbers, adjustable font size (12-22 px) and padding (16-96 px).
- Copy PNG straight to clipboard (where supported) or download as a file.
- Filename, theme, language and style settings persist in localStorage.
- Runs 100% in your browser — no server, no upload, no telemetry.
Frequently asked questions
How is this different from Carbon or Ray.so?
Both are excellent — but they're SaaS, send your code to a server, and require an internet connection. This tool runs entirely in your browser, never uploads anything, and has no usage limits.
Why does my code look slightly different from VS Code?
The highlighter here is regex-driven and covers the common 80% of each language — it knows keywords, strings, numbers, comments and function calls, but it doesn't have a full parser. For most snippets the result is indistinguishable; for very edge-case syntax (template literals with embedded expressions, JSX inside TS, etc.) some tokens may fall through to the default colour.
Can I add a custom language?
Not yet from the UI — but the engine in `lib/tools/css/code-screenshot.ts` is open source. Add a new tokenizer following the existing patterns and the theme system Just Works.
Why is 'Copy PNG' sometimes greyed out / fails?
Browsers gate the clipboard image API on a recent user gesture and HTTPS. Firefox doesn't support `ClipboardItem` for images at all on some platforms. Use Download PNG as a guaranteed fallback.
What font is used?
The CSS stack: `ui-monospace, SFMono-Regular, JetBrains Mono, Menlo, Consolas, monospace`. The actual font picked depends on your OS — macOS gets SF Mono, Linux usually JetBrains Mono or DejaVu, Windows Consolas.
How big are the PNG files?
A typical 20-line snippet at the default settings exports as a ~80 KB PNG. Larger snippets, larger fonts and more padding all increase size linearly.
Is there a maximum code length?
No hard cap — but canvas pixel limits kick in around 32,767 px per dimension. In practice 200 lines at 16 px font is fine; longer snippets risk hitting the limit.
Does it support dark mode toggle?
Each theme is its own design — pick Graphite for almost-black or Midnight for navy. There's no automatic OS-theme switch because the screenshot's purpose is to look the same wherever it's pasted.
Will it render emoji or Unicode characters?
Yes — the canvas font stack falls back to system emoji fonts. Multi-byte characters (东京, ñ, 🐙) render correctly.
Are my settings saved between visits?
Yes — code, language, theme, filename, font size, padding and line-number toggle all persist in localStorage under `toollyz:code-screenshot`.
Is anything uploaded?
No. The page is statically exported with no backend. Your code never leaves your browser.