# Shots - Complete Reference

> Shots is an open-source launch platform. It reads a software release, writes a cited launch brief, designs on-brand visuals, and drafts posts, and nothing ships until a person approves. It also includes a screenshot editor and browser-based image tools in every plan. Every plan is paid, and a signed-in workspace with an active subscription is required for everything; exports have no watermark.

## What is Shots?

Shots is a paid launch platform; there is no free plan. A release, typed in, sent through the API, or delivered by a GitHub, GitLab, or custom webhook, becomes a launch brief where every claim cites a source, a campaign plan, visuals rendered with the workspace brand kit, and channel copy for X, LinkedIn, Instagram, Product Hunt, the changelog, and email. Every post needs a human approval before it can be scheduled. Launch intelligence is in early access for design partners (https://shots.playbookmedia.io/design-partners).

Shots also includes a browser-based screenshot editor in every plan, with no watermark. Editing runs in the browser, so imported images are not uploaded to edit them; saved designs are stored in the workspace, and export compression round-trips the finished image through the server without storing it. It is open source under the Apache 2.0 license.

The editor is an open-source alternative to Pika Style, Shots.so (a separate product), and CleanShot X for images on 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; a signed-in Shots account is required

### 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 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 |
|------|-----|-------------|
| Screenshot Editor | https://shots.playbookmedia.io/ | Main canvas editor for signed-in workspaces (redirects to sign-in) |
| Editor alias | https://shots.playbookmedia.io/editor | Redirects to / |
| Landing | https://shots.playbookmedia.io/landing | Launch platform overview |
| Pricing | https://shots.playbookmedia.io/pricing | Pro, Business, and Enterprise plans |
| Design Partners | https://shots.playbookmedia.io/design-partners | Early access to launch intelligence |
| Mockup Generator | https://shots.playbookmedia.io/mockup-generator | iPhone, MacBook, and Apple Watch mockups with 3D angles and multi-device layouts |
| Image Tools Hub | https://shots.playbookmedia.io/tools | Index of the standalone image utilities |
| Remove Background | https://shots.playbookmedia.io/remove-background | On-device AI background remover that exports a transparent PNG |
| Compress Video | https://shots.playbookmedia.io/compress-video | FFmpeg WebAssembly video compressor: quality levels or a target size in MB, MP4 output |

### Image Tools
Standalone, single-purpose utilities for signed-in workspaces. 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://shots.playbookmedia.io/compress-image | Four compression levels with before and after sizes |
| Convert Image | https://shots.playbookmedia.io/convert-image | PNG, JPG, and WebP in every direction |
| Resize Image | https://shots.playbookmedia.io/resize-image | Exact pixels or percentage, aspect ratio locked by default |
| Crop Image | https://shots.playbookmedia.io/crop-image | Drag a selection or type pixels, with ratio presets |
| Rotate Image | https://shots.playbookmedia.io/rotate-image | Quarter turns plus horizontal and vertical flips |
| PNG to JPG | https://shots.playbookmedia.io/png-to-jpg | Direct converter with a background colour for transparency |
| JPG to PNG | https://shots.playbookmedia.io/jpg-to-png | Direct converter to a lossless format |
| PNG to WebP | https://shots.playbookmedia.io/png-to-webp | Direct converter that keeps transparency |
| WebP to PNG | https://shots.playbookmedia.io/webp-to-png | Direct converter for tools that cannot read WebP |
| JPG to WebP | https://shots.playbookmedia.io/jpg-to-webp | Direct converter for smaller web images |
| WebP to JPG | https://shots.playbookmedia.io/webp-to-jpg | Direct converter for maximum compatibility |

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

### Audience Pages
| Page | URL | Description |
|------|-----|-------------|
| For Developers | https://shots.playbookmedia.io/for/developers | Developer-focused use cases |
| For Marketers | https://shots.playbookmedia.io/for/marketers | Marketing-focused use cases |
| For Designers | https://shots.playbookmedia.io/for/designers | Design-focused use cases |

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

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

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

## Internationalization

Shots is available in 8 languages with subpath routing:

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

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

## Developer and API Reference

### Discovery

| Resource | URL | Format |
|----------|-----|--------|
| API Documentation | https://shots.playbookmedia.io/docs | HTML |
| Developer Portal | https://shots.playbookmedia.io/developers | HTML |
| Interactive API Reference | https://shots.playbookmedia.io/api-reference | HTML |
| OpenAPI Specification | https://shots.playbookmedia.io/openapi.json | OpenAPI 3.1 JSON |
| API Authentication and Rate Limits | https://shots.playbookmedia.io/docs/authentication | HTML |
| AI Agents and MCP Setup | https://shots.playbookmedia.io/docs/agents | HTML |
| MCP Server | https://shots-mcp.playbookmedia.io/mcp | MCP Streamable HTTP |
| llms.txt | https://shots.playbookmedia.io/llms.txt | Markdown |
| llms-full.txt | https://shots.playbookmedia.io/llms-full.txt | Markdown |
| Sitemap | https://shots.playbookmedia.io/sitemap.xml | XML |
| robots.txt | https://shots.playbookmedia.io/robots.txt | text |

### Authentication

The editor utility endpoints require a signed-in session or a workspace API key with the artifact:read scope in `X-API-Key`; a request with neither returns 401 with code `unauthorized`. A workspace without an active paid plan gets 403 with code `workspace_feature_not_entitled`; there is no free plan. Create a workspace API key in Settings → Developer API (/workspace/developers). Per-IP limits apply on top: `POST /api/screenshot` allows 20 requests per minute per IP and answers 429 with `Retry-After` and `X-RateLimit-*` headers. Workspace-scoped `/api/v1` operations require an organization key in `X-API-Key` or an authorized signed-in session, plus the declared permission, scope, feature, and quota checks.

### 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://shots.playbookmedia.io/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://shots.playbookmedia.io/
```

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.

### MCP server

https://shots-mcp.playbookmedia.io/mcp is the Shots MCP server (Streamable HTTP). Send a workspace API key as `Authorization: Bearer ss_...`, or connect an OAuth client through https://shots-mcp.playbookmedia.io/mcp-oauth-dynamic. Every call passes the same scope, plan, and quota checks as the REST API, and refusals use the error format above. An agent sees only the tools its key's scopes allow:

| Tool | Scope | Does |
|------|-------|------|
| listReleases | artifact:read | List the workspace releases |
| createRelease | release:create | Create a release brief |
| createAssetUploadUrl | upload:sign | Sign an asset upload |
| completeAssetUpload | asset:write | Complete an asset upload |
| createAssetDownloadUrl | artifact:read | Sign an asset download |
| deleteAsset | asset:write | Delete an asset (asks to confirm) |
| captureScreenshot | artifact:read | Screenshot a public page |
| listCampaigns | artifact:read | List campaigns |
| getCampaign | artifact:read | Read a campaign and its posts |
| createCampaign | release:create | Create a draft campaign |
| listApprovals | artifact:read | List posts waiting for review |
| requestCampaignReview | release:create | Submit drafts for review |
| scheduleCampaignPost | post:schedule | Schedule an approved post |
| listScheduledPosts | artifact:read | List the publishing schedule |
| createScheduledPost | post:schedule | Schedule an approved visual |
| cancelScheduledPost | post:schedule | Cancel a scheduled post (asks to confirm) |

No tool approves; a person does that in Shots. The scheduling tools need the post:schedule scope and take only posts and visuals a person approved.

### MCP client configuration

#### Claude Code

Terminal

```bash
claude mcp add --transport http shots https://shots-mcp.playbookmedia.io/mcp \
  --header "Authorization: Bearer $SHOTS_API_KEY"
```

#### Claude.ai and Claude Desktop

Claude.ai or Claude Desktop → Settings → Connectors → Add custom connector

```text
https://shots-mcp.playbookmedia.io/mcp-oauth-claude
```

#### ChatGPT

ChatGPT → Settings → Apps & Connectors → Advanced → Developer mode → Create

```text
https://shots-mcp.playbookmedia.io/mcp-oauth-dynamic
```

#### Cursor

~/.cursor/mcp.json, or .cursor/mcp.json in a project

```json
{
  "mcpServers": {
    "shots": {
      "headers": {
        "Authorization": "Bearer ${env:SHOTS_API_KEY}"
      },
      "url": "https://shots-mcp.playbookmedia.io/mcp"
    }
  }
}
```

#### VS Code (GitHub Copilot)

.vscode/mcp.json in a workspace, or MCP: Open User Configuration

```json
{
  "inputs": [
    {
      "description": "Shots API key",
      "id": "shots-api-key",
      "password": true,
      "type": "promptString"
    }
  ],
  "servers": {
    "shots": {
      "headers": {
        "Authorization": "Bearer ${input:shots-api-key}"
      },
      "type": "http",
      "url": "https://shots-mcp.playbookmedia.io/mcp"
    }
  }
}
```

#### Windsurf

~/.codeium/windsurf/mcp_config.json

```json
{
  "mcpServers": {
    "shots": {
      "headers": {
        "Authorization": "Bearer ${env:SHOTS_API_KEY}"
      },
      "serverUrl": "https://shots-mcp.playbookmedia.io/mcp"
    }
  }
}
```

#### Gemini CLI

Terminal

```bash
gemini mcp add --transport http shots https://shots-mcp.playbookmedia.io/mcp \
  --header "Authorization: Bearer $SHOTS_API_KEY"
```

#### Codex CLI

~/.codex/config.toml

```toml
[mcp_servers.shots]
url = "https://shots-mcp.playbookmedia.io/mcp"
bearer_token_env_var = "SHOTS_API_KEY"
```

#### OpenCode

opencode.json in a project, or ~/.config/opencode/opencode.json

```json
{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "shots": {
      "enabled": true,
      "headers": {
        "Authorization": "Bearer {env:SHOTS_API_KEY}"
      },
      "type": "remote",
      "url": "https://shots-mcp.playbookmedia.io/mcp"
    }
  }
}
```

No official CLI tool is published yet.

## 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

| Plan | Price |
|------|-------|
| Pro | $199/mo, or $169/mo billed annually |
| Business | $699/mo, or $594/mo billed annually |
| Enterprise | From $3,000/mo, billed annually. Contact team@playbookmedia.io |

There is no free plan. A signed-in workspace is required on every plan. The screenshot editor and image tools are included in every plan, and exports have no watermark. Launch intelligence is in early access for design partners. Details: https://shots.playbookmedia.io/pricing

## Privacy

Editing and preview rendering happen in the browser, and imported images are not uploaded merely to edit them. Account and workspace operations use server-side tenant data. Export compression, URL capture, tweet import, and remote-image import send the data needed for those operations to the server or named providers. Authentication uses session cookies, configured analytics may use identifiers, and public pages may load Google AdSense. See https://shots.playbookmedia.io/privacy-policy for details.

## Use Cases

1. **Release Launches**: Turn a release into a cited launch brief, on-brand visuals, and posts that a person approves before they ship
2. **Social Media Graphics**: Create images for Twitter/X, Instagram, LinkedIn, and Product Hunt launches
3. **SaaS Screenshots**: Style product screenshots for landing pages, documentation, and app stores
4. **Developer Portfolios**: Show projects with framed screenshots
5. **Marketing Materials**: Create graphics for presentations, pitch decks, and ads
6. **Documentation**: Add framed screenshots to docs and READMEs
7. **Animated Content**: Create animated slideshows and export as video

## Contact & Links

- **Website**: https://shots.playbookmedia.io
- **Email**: team@playbookmedia.io
- **Bug Reports and Feature Requests**: team@playbookmedia.io