Create beautiful screenshots of your code or terminal commands for X (Twitter), LinkedIn, GitHub READMEs, and blog posts. Features macOS window buttons, custom gradients, line numbers, and instant clipboard copy.
Technical guide on rendering code snippets to Retina-ready raster graphics.
Sharing software architecture snippets, terminal outputs, and git commit diffs on technical documentation, social media, or changelogs requires high-contrast, visually structured formatting. This tool renders text and UI chrome onto an offscreen HTML5 2D Canvas context, computing subpixel font kerning and multi-layer drop shadows before exporting to PNG.
Standard web canvases rendered at 1x resolution appear blurry on high-DPI displays. The rendering engine scales internal canvas dimensions by a factor of 2x (or window.devicePixelRatio) while keeping CSS display dimensions constant. Text and vector primitives are rasterized at native display density to eliminate pixelation.
Code readability depends on strict typographic monospace grid alignment. Line numbers and code blocks are drawn with fixed character-width fonts (such as JetBrains Mono, Fira Code, or native monospace stacks). Line height is calculated with a 1.6x multiplier relative to font size to maintain vertical rhythm.
Direct image clipboard copying uses the asynchronous navigator.clipboard.write API. Canvas pixel buffers are serialized into an image/png Blob and wrapped inside a ClipboardItem instance, allowing zero-file-download copying directly into GitHub pull requests or design tools.
| Parameter | Standard / Value | Engineering Scope |
|---|---|---|
| Render Pipeline | HTML5 2D Canvas API | Hardware-accelerated client-side rasterizer |
| Output Density | 2x Hi-DPI Retina | Scale factor for crisp text reproduction |
| Export Formats | PNG (Lossless) / System Clipboard | Standard 24-bit RGB + 8-bit alpha channel |
| Shadow Algorithm | Multi-radius Gaussian Blur | Dual-pass shadow offset calculation |
Convert SVGs into clean React (JSX/TSX), Vue 3, Flutter, React Native, SwiftUI components and CSS Data URIs.
Generate complete iOS, Android Adaptive Icons, PWA, and Web Favicon asset packages with single-click ZIP download.
Inspect and purge hidden EXIF markers, GPS coordinates, device serial numbers, and camera metadata before publishing.