Skip to main content

Code Screenshot

Create beautiful code snippet images with customizable themes.

Reviewed by · Last reviewed

JavaScript
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log(fibonacci(10));

How to Use the Code Screenshot Tool

  1. Paste or type code into the editor area. Any language is accepted - the tool does not parse or lint your code, it just lays out the characters.
  2. Pick a theme: Dark and Light are the neutral defaults; Monokai and Dracula add personality if the screenshot is for a blog header or social post.
  3. Adjust padding, corner radius, and font size to control the visual weight of the output. A wider padding and 24px font size looks great on a 1200x630 social card; tighter settings fit better in documentation.
  4. Optionally add a title (filename, module name) and toggle the three-dot window controls to mimic a macOS window chrome.
  5. Click "Generate Screenshot". The tool renders the styled code into a canvas at retina resolution and offers the PNG for download.

How the Canvas Rendering Works

We build an in-memory HTMLCanvasElement sized to the dimensions of the styled code block, then paint layer by layer. A ctx.fillRect with the theme\'s background color establishes the base; rounded corners use ctx.roundRect (part of the Canvas 2D spec since 2022, polyfilled in older browsers). Window control dots are three small circles drawn with ctx.arc. The title bar uses ctx.fillText in a proportional UI font. The code body sets a monospace font via ctx.font, then walks lines of the source calling ctx.fillText once per line at calculated y-offsets.

Because the canvas is sized at device pixel ratio (window.devicePixelRatio is 2 on retina displays, 3 on some phones), the exported PNG is crisp on HiDPI screens. For dimensions, a typical 20-line code block at 16px font produces roughly 800x600 logical pixels, which at 2x density exports as 1600x1200 - large enough for Twitter/X and LinkedIn headers without additional upscaling. The final export goes through canvas.toBlob("image/png"), producing a lossless file with no JPEG artifacts.

When a Code Screenshot Beats a Code Block

  • Twitter/X posts, where a styled image gets more engagement than pasted code in a monospace text.
  • Conference talk slides, where a cleanly-rendered screenshot is more readable from the back row than tiny pasted code.
  • Blog post hero images and Open Graph social previews, where a themed code excerpt visually signals the technical content.
  • Documentation where pasted code might be interpreted as active HTML or markdown (avoiding escape hell in an MDX file).
  • Sharing a minimal bug reproduction on Discord, Slack, or forums where a screenshot holds its formatting even after copy-paste.
  • Creating a consistent aesthetic for a tutorial series where every screenshot has the same theme, padding, and window chrome.

Rendering Pitfalls You Might Hit

  • No syntax highlighting in the default flow. Colors are uniform per theme, which looks clean but drops the visual hierarchy that makes real code readable. For highlighted screenshots, use Carbon or Ray.so instead.
  • Tab width varies by font. The canvas monospace font (Menlo, Consolas, or SF Mono depending on OS) handles tabs as a variable-width advance. If your code uses tabs instead of spaces, re-indent with spaces before screenshotting for consistent alignment.
  • Very long lines get cropped. The canvas width is fixed to fit the widest line at rendering time. If any single line is extremely long (400+ characters), the output becomes awkwardly wide. Break long lines manually or scroll the source.
  • Unicode glyphs depend on OS fonts. Emoji, Chinese/Japanese/Korean characters, or special symbols render with the OS fallback font chain. Two users on Windows vs. macOS may see slightly different glyphs for the same code.
  • No line numbers by default. The tool keeps the output clean; line numbers would need to be added in a separate pass or by pre-pending them to the source text.

The Aesthetics of Code-as-Image

Code screenshots as a design trend trace back to Carbon.sh (launched by Dawn Labs in 2017), which turned sharing code on Twitter into a visual medium. Before Carbon, developers posted screenshots of their local IDE, which looked inconsistent and tied to individual setups. Carbon standardized the aesthetic: rounded corners, macOS traffic-light window controls, a single consistent theme, tight padding, monospace font. Ray.so (from the Raycast team) added more themes and cleaner export. Polacode popularized the pattern as a VS Code extension. The underlying tech is simple - render text to canvas or SVG and style it - but the UX of "paste, tweak, download" is what made the pattern stick. Today code screenshots are a standard asset in conference talks, dev blog hero images, and Twitter threads, and the aesthetic has stabilized enough that most services offer interchangeable themes.

How This Differs from Carbon and Ray.so

Carbon.sh is the original and still the most polished, with proper syntax highlighting powered by PrismJS, dozens of themes, and export to PNG and SVG. Ray.so (ray.so by Raycast) is the modern equivalent with Raycast\'s design-forward aesthetic and better export options. Both run in the browser but load larger bundles (PrismJS alone is a couple hundred KB), and both use their own server for some features like custom logo uploads. This tool renders without any syntax highlighting dependency, making it lighter and faster to load, and it guarantees nothing you paste is transmitted anywhere. If your code is sensitive (API keys in an error message, proprietary algorithms) and privacy matters, stay here; if you want a Hollywood-glossy rainbow-highlighted screenshot, Carbon is the right tool. For VS Code users, the Polacode extension does it all locally inside your editor.

Frequently Asked Questions

Will the tool syntax-highlight my code like an IDE would?

Not in the current version. The code is rendered in the theme's foreground color uniformly, with no per-token coloring. This keeps the output visually clean and the tool's bundle small. If you need syntax colors, Carbon.sh and Ray.so both use PrismJS for rich highlighting across many languages and produce more IDE-like output.

What resolution does the exported PNG use?

The canvas is sized to match the styled code dimensions times <code>window.devicePixelRatio</code>, so a Retina Mac or HiDPI Windows laptop exports at 2x or 3x the logical pixels. A code block that looks 800x600 on screen is a 1600x1200 or 2400x1800 PNG on disk, which reads crisply on social media feeds and presentation slides without further scaling.

Does the tool upload my code snippet anywhere?

No. The code never leaves your browser. It is rendered to a local canvas and exported as a blob via <code>canvas.toBlob</code>. No fetch call carries the text, no analytics event references it. This matters because developers often screenshot code that contains API keys, secrets, or proprietary logic without thinking - staying local prevents those leaks.

Can I use my own custom font?

Not through the current UI. The tool picks a monospace font from the browser's default stack: SF Mono on macOS, Consolas on Windows, DejaVu Sans Mono on Linux. For a specific custom font (JetBrains Mono, Fira Code, Iosevka with ligatures), you would need to either install the font system-wide or use a tool that loads web fonts into its canvas context, like Carbon with custom font support.

What is the maximum length of code I can screenshot?

There is no hard character limit, but practical readability breaks down past 50-80 lines - the resulting image becomes very tall and tiny in feeds. For long code, consider a series of focused screenshots showing the key parts, with ellipses (<code>// ...</code>) bridging them. Very large blocks may also trigger browser canvas area limits around 268 million pixels, though this is hard to hit with typical font sizes.

Why does my image look pixelated on Twitter or LinkedIn?

Social platforms re-compress uploaded images through their own pipelines, which can soften PNGs. To minimize this, the tool already exports at retina resolution (2x or 3x the logical pixels). If the output still softens, upload the PNG at its full resolution and let the platform downsample - do not pre-shrink it yourself, because each round of compression stacks artifacts.

Can I save my theme preferences for next time?

Not currently; settings reset on page reload. For a consistent personal aesthetic, keep your preferred theme and padding values in a note and re-apply them per session. If you screenshot often, a local extension like Polacode for VS Code stores settings persistently and avoids the round-trip.

How does this compare to a native screenshot tool?

Native screenshot tools (macOS Screenshot, Windows Snip & Sketch) capture whatever is on your screen, including your IDE's fonts, colors, and any visible UI clutter. This tool produces a clean, standalone, IDE-agnostic image with consistent styling - better for sharing publicly. Use native screenshots for "look at this bug in my editor"; use this tool for "here is a snippet I want to share on Twitter."

Does the tool preserve indentation correctly?

Yes, as long as your source uses spaces. Tabs render at variable widths depending on the font and the browser, which can produce misaligned output. Before pasting, many editors have a "Convert Indentation to Spaces" action - run that on your source to guarantee consistent visual alignment in the screenshot.

Can I export to SVG instead of PNG?

Not currently. PNG is the only export format, chosen because it compresses flat-color code screenshots extremely well (often only 20-40 KB for a typical block) and is universally supported. For SVG export with theme-independent scalability, Carbon.sh offers SVG output - or render to PNG here and vectorize externally with a tool like Potrace, though the result is rarely smaller than the original PNG.

More Developer Tools

Base64 Encoder & Decoder

Encode UTF-8 text to Base64 online or decode Base64 back to UTF-8 and plain text. Runs in your browser with no upload.

Open tool

Bulk URL Encode / Decode

Encode or decode many URLs at once. Paste a newline-separated list and the tool processes each line in parallel, preserving order and blank lines.

Open tool

Color Converter

Convert colors between HEX, RGB, HSL and CMYK formats.

Open tool

Cron Expression Parser

Parse cron expressions into human-readable schedules with next run times.

Open tool

CSS Formatter / Minifier

Format, beautify and minify CSS code.

Open tool

CSV to JSON Converter

Convert CSV data to JSON array format.

Open tool