Screenshotter
Screenshot and code snippet beautifier: wrap images and code in gradient backgrounds, transform, annotate, and export at full resolution
Role
Full Stack Developer
Team
Solo
- Accurate full-resolution PNG export matching on-screen render
- Syntax highlighting with dark/light theme toggle in canvas
- Drag-and-reposition text overlays with inline editing
- html-to-image canvas rendering pipeline
- Prism.js integration with dynamic language loading
- CSS variable-based dark/light theming system
Overview
Screenshotter is a browser-based tool for making screenshots and code snippets look beautiful. Upload or paste any image, or drop in code, then wrap it in one of 10 gradient presets, adjust padding and transforms, add text overlays, and export a full-resolution PNG. No account required.
10
Gradient presets
20
Highlight languages
2 days
Build timeline
None
Account required
How It Works
- 1
Drop in content
Upload or paste an image, or switch to the code editor with syntax highlighting.
- 2
Style the canvas
Pick one of 10 gradient presets, then tune padding, border radius, and transforms (skew, rotate, offset) with sliders and preset shortcuts.
- 3
Annotate
Add text overlays: drag to reposition, double-click to edit inline, with per-element font, color, and size.
- 4
Export
Download a full-resolution PNG that renders exactly what you see on screen.
Key Features
Two input modes
Image upload/paste or a code editor with syntax highlighting, one canvas pipeline for both.
10 gradient presets
Aurora, Sunset, Midnight, Forest, Ocean, Candy, Dusk, Ice, and more, across radial mesh, layered orb, and conic blend styles.
20-language syntax highlighting
JS, TS, JSX, TSX, Python, Rust, Go, HTML, CSS, JSON, Bash, SQL, Java, Swift, Kotlin, C, C++, Ruby, PHP, and YAML via Prism.js with dynamic language loading.
Transform controls
Skew X/Y, rotate, and offset X/Y with preset shortcuts, plus padding and border radius sliders.
Text overlays
Drag to reposition, double-click to edit inline. Font, color, and size are set per element.
Saved presets
Named presets persisted to localStorage: rename, delete, and one-click apply.
Full-res PNG export
The exported canvas renders exactly what you see at display size, powered
by html-to-image.
Dark / light mode
Full CSS variable theming system via next-themes, applied to the app and the highlighted code alike.
The hardest part of a beautifier is trust: the PNG must match the preview
pixel for pixel. Rendering the export from the same DOM node the user is
looking at, via html-to-image, keeps the on-screen render and the
full-resolution output identical by construction.