A free, browser-based editor for creating stunning screenshots and visuals. No signup, no watermarks.
Live: https://screenshot-studio.com
- Drag & Drop Upload - PNG, JPG, WEBP up to 100MB
- Website Screenshots - Capture any URL via Screen-Shot.xyz
- 50+ Backgrounds - Gradients, solid colors, images, blur, and noise effects
- Device Frames - macOS, Windows, Arc-style, Polaroid borders
- 3D Transforms - Perspective rotation with realistic depth
- Shadows & Borders - Customizable blur, spread, offset, and color
- Text Overlays - Multiple layers with custom fonts and shadows
- Image Overlays - Arrows, icons, and decorative elements
- Aspect Ratios - Instagram, YouTube, Twitter, LinkedIn, Open Graph
- High-Res Export - PNG/JPG up to 5x scale, fully in-browser
- Undo/Redo - Unlimited history with keyboard shortcuts
# Clone and install
git clone https://github.com/KartikLabhshetwar/stage.git
cd stage
npm install
# Start development server
npm run devCreate .env.local for optional features:
# Cloudflare R2 (for asset storage)
R2_ACCESS_KEY_ID=your-access-key
R2_SECRET_ACCESS_KEY=your-secret-key
R2_BUCKET_NAME=your-bucket
R2_ACCOUNT_ID=your-account-id
# Database (for screenshot caching)
DATABASE_URL="postgresql://user:password@host:port/dbname"
# Screenshot API (optional, defaults to free Screen-Shot.xyz)
SCREENSHOT_API_URL=https://api.screen-shot.xyzNote: Core features work without any configuration. Database and R2 are only needed for website screenshots and asset optimization.
| Category | Technology |
|---|---|
| Framework | Next.js 16 with App Router |
| UI | React 19 with React Compiler |
| Language | TypeScript 5 |
| Styling | Tailwind CSS 4 |
| Components | Radix UI |
| State | Zustand + Zundo (undo/redo) |
| Animations | Motion |
| Data Fetching | TanStack Query |
| Canvas Export | modern-screenshot |
| Image Processing | Sharp |
| Storage | Cloudflare R2 |
| Database | Prisma + PostgreSQL |
| Icons | Hugeicons |
screenshot-studio/
├── app/ # Next.js pages and API routes
├── components/
│ ├── canvas/ # Canvas rendering (HTML/CSS based)
│ ├── editor/ # Editor panels and controls
│ ├── landing/ # Landing page components
│ └── ui/ # Shared UI components
├── lib/
│ ├── store/ # Zustand state management
│ ├── export/ # Export pipeline
│ └── constants/ # Backgrounds, presets, fonts
├── hooks/ # Custom React hooks
└── types/ # TypeScript definitions
See ARCHITECTURE.md for detailed documentation.
npm run dev # Development server
npm run build # Production build
npm start # Production serverSee CONTRIBUTING.md for guidelines.
