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.
Key Features
Core Capabilities
-
Two Input Modes Image upload/paste or code editor with syntax highlighting
-
10 Gradient Presets Aurora, Sunset, Midnight, Forest, Ocean, Candy, Dusk, Ice, and more — radial mesh, layered orbs, 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, YAML via Prism.js
-
Transform Controls Skew X/Y, rotate, offset X/Y with preset shortcuts; padding and border radius sliders
-
Text Overlays Drag to reposition, double-click to edit inline; per-element font, color, size
-
Saved Presets Named presets persisted to localStorage; rename, delete, one-click apply
-
Full-Res PNG Export Canvas renders exactly what you see at display size
-
Dark / Light Mode Full CSS variable system
Tech Stack
Frontend
- Next.js 16 (App Router)
- React 19
- Tailwind CSS v4
Animations
- Motion (motion/react)
Highlighting & Export
- Prism.js
- html-to-image
Theming
- next-themes