# Screenshot Studio - Complete Reference

> Free, open-source browser-based screenshot editor. Transform plain screenshots into professional graphics with backgrounds, browser mockups, 3D effects, animations, and video export. No signup, no watermarks.

## What is Screenshot Studio?

Screenshot Studio is a free, browser-based screenshot editor that transforms plain screenshots into professional-quality graphics. Editing runs in the browser, so imported images are not uploaded to edit them; export compression round-trips the finished image through the server without storing it. It is open source and available at https://github.com/opennookorg/screenshot-studio.

Built as a free alternative to paid tools like Pika Style, Shots.so, and CleanShot X, Screenshot Studio is used by developers, marketers, and designers to create polished images for social media, landing pages, documentation, and presentations.

## Complete Feature List

### Backgrounds
- 250+ backgrounds (linear, radial, mesh, conic, solid)
- Solid color backgrounds with custom color picker
- Paper texture backgrounds
- Pattern backgrounds
- Custom image backgrounds
- Transparent background support

### Browser Mockups
- Safari browser frame (light and dark mode)
- Chrome browser frame (light and dark mode)
- Arc browser frame
- Minimal window frame
- Custom URL bar text

### Device Frames
- macOS window chrome
- Polaroid-style frame
- Glass morphism frame
- Outline frame
- Border frame with customizable radius

### 3D Effects
- Perspective transforms (X, Y, Z rotation)
- Tilt effects
- Depth-of-field simulation
- Custom shadow with blur, spread, offset, and color

### Standalone Image Tools
- Compress: light, balanced, strong, and extreme levels
- Convert: PNG, JPG, and WebP, with a chosen background behind transparency
- Resize: by exact pixels or percentage, with stepped downscaling
- Crop: drag or type, with 1:1, 16:9, 4:3, 3:2, and 9:16 presets
- Rotate and flip: 90, 180, 270 degrees plus mirroring
- Batch input for every tool except crop, downloaded as a zip
- All of it runs in the browser and calls no API

### Image Editing
- Resize and scale
- Opacity control
- Border radius (0 to fully rounded)
- Padding and inset controls
- Shadow with full customization
- Position and alignment

### Text Overlays
- Multiple text layers
- 32 Google Fonts across sans-serif, serif, display, handwriting, and monospace
- Custom font size, weight, color
- Text shadow and positioning
- Letter spacing and line height

### Animation & Video
- 43 animation presets (zoom in/out, pan, Ken Burns, tilt, fade, bounce, slide, etc.)
- Keyframe timeline editor
- Multi-slide slideshows
- Video export: MP4, WebM, GIF
- Custom duration and easing per animation
- FFmpeg WASM-based encoding (runs in browser)

### Import
- Drag and drop images
- Paste from clipboard
- Import tweets by URL (renders as image)
- Import code snippets (syntax highlighted)

### Export
- PNG (lossless, up to 5x resolution)
- JPEG (configurable quality)
- WebP (configurable quality)
- MP4 video
- WebM video
- GIF animation
- Copy to clipboard
- Scale: 1x, 2x, 3x, 4x, 5x

### Templates & Presets
- One-click professional styling presets
- Aspect ratio presets: Auto, 1:1, 4:3, 16:9, 9:16, 4:5, 2:3, 3:2, 21:9
- Social platform presets (Twitter, Instagram, LinkedIn, etc.)

## All Pages

### Core
| Page | URL | Description |
|------|-----|-------------|
| Start | https://www.screenshot-studio.com/ | Choose the screenshot editor, code images, App Store screenshots, or image tools |
| Screenshot Editor | https://www.screenshot-studio.com/editor | Main canvas editor for creating designs |
| Landing | https://www.screenshot-studio.com/landing | Product landing page with overview |
| Free Screenshot Editor | https://www.screenshot-studio.com/free-screenshot-editor | SEO landing page for free editor |
| Mockup Generator | https://www.screenshot-studio.com/mockup-generator | iPhone, MacBook, and Apple Watch mockups with 3D angles and multi-device layouts |
| Image Tools Hub | https://www.screenshot-studio.com/tools | Index of the standalone image utilities |
| Remove Background | https://www.screenshot-studio.com/remove-background | On-device AI background remover that exports a transparent PNG |

### Image Tools
Standalone, single-purpose utilities. Each decodes, processes, and re-encodes the image locally with Canvas and a Web Worker, and calls no API. Batch input downloads as one zip.

| Page | URL | Description |
|------|-----|-------------|
| Compress Image | https://www.screenshot-studio.com/compress-image | Four compression levels with before and after sizes |
| Convert Image | https://www.screenshot-studio.com/convert-image | PNG, JPG, and WebP in every direction |
| Resize Image | https://www.screenshot-studio.com/resize-image | Exact pixels or percentage, aspect ratio locked by default |
| Crop Image | https://www.screenshot-studio.com/crop-image | Drag a selection or type pixels, with ratio presets |
| Rotate Image | https://www.screenshot-studio.com/rotate-image | Quarter turns plus horizontal and vertical flips |
| PNG to JPG | https://www.screenshot-studio.com/png-to-jpg | Direct converter with a background colour for transparency |
| JPG to PNG | https://www.screenshot-studio.com/jpg-to-png | Direct converter to a lossless format |
| PNG to WebP | https://www.screenshot-studio.com/png-to-webp | Direct converter that keeps transparency |
| WebP to PNG | https://www.screenshot-studio.com/webp-to-png | Direct converter for tools that cannot read WebP |
| JPG to WebP | https://www.screenshot-studio.com/jpg-to-webp | Direct converter for smaller web images |
| WebP to JPG | https://www.screenshot-studio.com/webp-to-jpg | Direct converter for maximum compatibility |

### Features
| Page | URL | Description |
|------|-----|-------------|
| Features Hub | https://www.screenshot-studio.com/features | All features overview |
| Screenshot Beautifier | https://www.screenshot-studio.com/features/screenshot-beautifier | Background and styling features |
| Social Media Graphics | https://www.screenshot-studio.com/features/social-media-graphics | Social platform image creation |
| Animation Maker | https://www.screenshot-studio.com/features/animation-maker | Animation timeline and video export |
| 3D Effects | https://www.screenshot-studio.com/features/3d-effects | Perspective and depth effects |
| Browser Mockups | https://www.screenshot-studio.com/features/browser-mockups | Safari, Chrome, Arc frames |
| Background Remover | https://www.screenshot-studio.com/remove-background | On-device AI background removal |

### Audience Pages
| Page | URL | Description |
|------|-----|-------------|
| For Developers | https://www.screenshot-studio.com/for/developers | Developer-focused use cases |
| For Marketers | https://www.screenshot-studio.com/for/marketers | Marketing-focused use cases |
| For Designers | https://www.screenshot-studio.com/for/designers | Design-focused use cases |

### Comparison Pages
| Page | URL | Description |
|------|-----|-------------|
| vs Pika Style | https://www.screenshot-studio.com/compare/pika-style | Feature comparison with Pika Style |
| vs Shots.so | https://www.screenshot-studio.com/compare/shots-so | Feature comparison with Shots.so |
| vs Snagit | https://www.screenshot-studio.com/compare/snagit | Feature comparison with Snagit |
| vs CleanShot X | https://www.screenshot-studio.com/compare/cleanshot-x | Feature comparison with CleanShot X |
| vs Screely | https://www.screenshot-studio.com/compare/screely | Feature comparison with Screely |
| vs Carbon | https://www.screenshot-studio.com/compare/carbon | Feature comparison with Carbon |
| vs Ray.so | https://www.screenshot-studio.com/compare/ray-so | Feature comparison with Ray.so |
| vs Xnapper | https://www.screenshot-studio.com/compare/xnapper | Feature comparison with Xnapper |
| vs remove.bg | https://www.screenshot-studio.com/compare/remove-bg | Feature comparison with remove.bg |

### Guides
| Page | URL | Description |
|------|-----|-------------|
| Guides Hub | https://www.screenshot-studio.com/guides | Index of how-to guides and tool roundups |
| How to Edit a Screenshot Online for Free (2026) | https://www.screenshot-studio.com/guides/how-to-edit-screenshot-online | Step-by-step how-to |
| How to Add Text to a Screenshot Online (Free) | https://www.screenshot-studio.com/guides/how-to-add-text-to-screenshot | Step-by-step how-to |
| How to Blur Part of a Screenshot Online (Free) | https://www.screenshot-studio.com/guides/how-to-blur-screenshot | Step-by-step how-to |
| How to Annotate a Screenshot Online (Arrows, Shapes, Text) | https://www.screenshot-studio.com/guides/how-to-annotate-screenshot | Step-by-step how-to |
| How to Make Screenshots Look Professional (Free Beautifier) | https://www.screenshot-studio.com/guides/how-to-beautify-screenshots | Step-by-step how-to |
| How to Animate a Screenshot and Export a Video (Free) | https://www.screenshot-studio.com/guides/how-to-animate-screenshots | Step-by-step how-to |
| How to Make a 3D Screenshot Mockup Online (Free) | https://www.screenshot-studio.com/guides/how-to-make-3d-screenshot | Step-by-step how-to |
| How to Put a Screenshot in an iPhone or MacBook Mockup | https://www.screenshot-studio.com/guides/how-to-put-screenshot-in-iphone-mockup | Step-by-step how-to |
| How to Add a Browser Window Frame to a Screenshot | https://www.screenshot-studio.com/guides/how-to-add-browser-frame-to-screenshot | Step-by-step how-to |
| How to Post Screenshots on Instagram Without Cropping | https://www.screenshot-studio.com/guides/instagram-screenshot-size | Step-by-step how-to |
| App Store Screenshot Sizes and How to Make Them (2026) | https://www.screenshot-studio.com/guides/app-store-screenshot-sizes | Step-by-step how-to |
| How to Take a Screenshot and Edit It (Mac, Windows, Chromebook) | https://www.screenshot-studio.com/guides/how-to-take-and-edit-screenshot | Step-by-step how-to |
| How to Screenshot a Tweet (X Post) Cleanly for Free | https://www.screenshot-studio.com/guides/how-to-screenshot-a-tweet | Step-by-step how-to |
| Best Free Screenshot Mockup Generators (2026) | https://www.screenshot-studio.com/guides/best-free-screenshot-mockup-generators | Dated roundup with prices and limits |
| Best Free Screenshot Editors With No Watermark (2026) | https://www.screenshot-studio.com/guides/best-free-screenshot-editors-no-watermark | Dated roundup with prices and limits |
| Best Code to Image Tools for READMEs and Social Posts (2026) | https://www.screenshot-studio.com/guides/best-code-to-image-tools | Dated roundup with prices and limits |
| Best Free Shots.so Alternatives (2026) | https://www.screenshot-studio.com/guides/best-free-shots-so-alternatives | Dated roundup with prices and limits |
| Best Free Screely Alternatives (2026) | https://www.screenshot-studio.com/guides/best-free-screely-alternatives | Dated roundup with prices and limits |

### Company
| Page | URL | Description |
|------|-----|-------------|
| About | https://www.screenshot-studio.com/about | About the project and team |
| Contact | https://www.screenshot-studio.com/contact | Ways to reach us |
| Privacy Policy | https://www.screenshot-studio.com/privacy-policy | How we handle data |
| Terms & Conditions | https://www.screenshot-studio.com/terms | Usage terms |
| Changelog | https://www.screenshot-studio.com/changelog | Release notes and updates |

## Internationalization

Screenshot Studio is available in 8 languages with subpath routing:

| Language | Prefix | Example |
|----------|--------|---------|
| English (default) | / | https://www.screenshot-studio.com/about |
| Spanish | /es | https://www.screenshot-studio.com/es/about |
| French | /fr | https://www.screenshot-studio.com/fr/about |
| German | /de | https://www.screenshot-studio.com/de/about |
| Japanese | /ja | https://www.screenshot-studio.com/ja/about |
| Portuguese | /pt | https://www.screenshot-studio.com/pt/about |
| Korean | /ko | https://www.screenshot-studio.com/ko/about |
| Chinese | /zh | https://www.screenshot-studio.com/zh/about |

Locale detection: URL path > cookie > Accept-Language header > default (English).

## Developer and API Reference

### Discovery

| Resource | URL | Format |
|----------|-----|--------|
| API Documentation | https://www.screenshot-studio.com/docs | HTML |
| Developer Portal | https://www.screenshot-studio.com/developers | HTML |
| OpenAPI Specification | https://www.screenshot-studio.com/openapi.json | OpenAPI 3.1 JSON |
| API Authentication and Rate Limits | https://www.screenshot-studio.com/docs/authentication | HTML |
| llms.txt | https://www.screenshot-studio.com/llms.txt | Markdown |
| llms-full.txt | https://www.screenshot-studio.com/llms-full.txt | Markdown |
| Sitemap | https://www.screenshot-studio.com/sitemap.xml | XML |
| robots.txt | https://www.screenshot-studio.com/robots.txt | text |

### Authentication

The public API needs no API key, token, or account. Requests are anonymous. Access is shaped by per-IP rate limits rather than credentials: `POST /api/screenshot` allows 20 requests per minute per IP and answers 429 with `Retry-After` and `X-RateLimit-*` headers.

### Endpoints

| Operation ID | Method | Path | Description |
|--------------|--------|------|-------------|
| captureScreenshot | POST | /api/screenshot | Capture a live URL as a base64 PNG |
| optimizeExportImage | POST | /api/export | Recompress an image as PNG, JPEG, or WebP |
| getTweet | GET | /api/tweet/{id} | Fetch a tweet payload by status ID |
| proxyTwitterImage | GET | /api/image-proxy | Same-origin proxy for Twitter media |
| getOpenApiSpec | GET | /openapi.json | This API's OpenAPI 3.1 document |
| getLlmsTxt | GET | /llms.txt | Markdown site overview |
| getLlmsFullTxt | GET | /llms-full.txt | Full Markdown reference |

### Error format

Every failing request returns JSON:

```json
{
  "error": "URL is required",
  "code": "invalid_request",
  "message": "URL is required",
  "hint": "Send a JSON body with a url string.",
  "status": 400,
  "documentation": "https://www.screenshot-studio.com/docs#errors"
}
```

`code` is stable and safe to branch on. `error` and `message` carry the same human-readable text.

### Markdown content negotiation

Every page URL serves Markdown when the request prefers it:

```
curl -H "Accept: text/markdown" https://www.screenshot-studio.com/
```

Responses set `Content-Type: text/markdown; charset=utf-8` and `Vary: Accept, Accept-Encoding`. A request that accepts neither `text/html` nor `text/markdown` is answered with 406. Unknown paths return 404 with a Markdown body listing where to look next.

### CLI and MCP

No official CLI tool and no MCP server are published yet. Agents should use the HTTP API above.

## Technology Stack

- **Framework**: Next.js 16 with App Router
- **UI**: React 19, Tailwind CSS, Radix UI primitives
- **State**: Zustand with temporal (undo/redo)
- **Canvas**: HTML Canvas with modern-screenshot for rendering
- **Video**: FFmpeg WASM for browser-based encoding
- **Assets**: Cloudflare R2
- **i18n**: next-intl with 8 locales
- **TypeScript**: Full type safety throughout

## Pricing

100% free forever. No signup required, no watermarks, no premium tier, no hidden costs. Every feature is available to every user with unlimited exports.

## Privacy

All image processing happens in the browser. No images are uploaded to any server. The only data collected is basic analytics (page views, feature usage) via privacy-respecting analytics. No cookies for advertising or tracking.

## Use Cases

1. **Social Media Graphics**: Create eye-catching images for Twitter/X, Instagram, LinkedIn, and Product Hunt launches
2. **SaaS Screenshots**: Beautify product screenshots for landing pages, documentation, and app stores
3. **Developer Portfolios**: Showcase projects with professional-looking screenshots
4. **Marketing Materials**: Create graphics for presentations, pitch decks, and ads
5. **Documentation**: Add polished screenshots to docs and READMEs
6. **Animated Content**: Create animated slideshows and export as video

## Contact & Links

- **Website**: https://www.screenshot-studio.com
- **GitHub**: https://github.com/opennookorg/screenshot-studio
- **Twitter/X**: https://x.com/screenshotstdio
- **Email**: kartik.labhshetwar@gmail.com
- **Bug Reports**: https://github.com/opennookorg/screenshot-studio/issues
- **Feature Requests**: https://github.com/opennookorg/screenshot-studio/issues/new?labels=enhancement