DevShot

Drop the screenshot. Keep the taste.

A free, opinionated screenshot beautifier for humans and MCP agents. No AI, no account, no boring presets.

devshot.emadev.co

What it does

• Single-page drag, drop and clipboard-paste editor
• Image, full-height public website, Shiki code and terminal sources
• Pop gradient backgrounds
• Opinionated clean, browser and poster frames
• Clean, pop, noir, acid and dream looks plus glow, orbit and grid HTML-in-Canvas effects
• Padding, aspect ratio, drag-to-focus crop, zoom, rounded corners and shadows
• PNG or JPEG export up to 4096 px wide
• Local download and copy-as-PNG, with on-demand server preview when the client API is unavailable
• Public Streamable HTTP MCP endpoint
• Finished image returned directly to the agent
• One Svelte HTML-in-Canvas renderer shared by preview, HTTP and MCP
• Mandatory bottom-right watermark with the official DevShot mark and website

Experimental browser requirement

DevShot deliberately uses the WICG HTML-in-Canvas API without a fallback.

For the web preview, use Chrome Beta or Canary and enable:

chrome://flags/#canvas-draw-element

The server launches the locally installed Chrome Beta channel with CanvasDrawElement enabled. If Chrome Beta is missing, export and MCP calls fail with an explicit setup error.

Website capture uses a fixed 1440 px desktop or 390 px mobile viewport and preserves the full page height for drag-to-focus framing.

Install the required browser distribution with:

pnpm exec playwright install chrome-beta

Run locally

pnpm install
cp .env.example .env
pnpm dev

PUBLIC_SITE_URL is required and must be the canonical public origin for the deployment. It is the single source of truth for the watermark, page metadata, agent docs and MCP URLs. For a fully local setup, use PUBLIC_SITE_URL=http://localhost:4173.

Open http://localhost:4173 in Chrome Beta with the flag enabled.

Deploy on Coolify

Use the repository Docker Compose configuration rather than Nixpacks. Compose builds the included Dockerfile, which installs Playwright's pinned Chrome for Testing build and its Linux libraries, then runs the SvelteKit Node server as a non-root user. The image builds natively on both amd64 and arm64; local development continues to use Chrome Beta by default.

In Coolify:

1. Select Docker Compose as the Build Pack and /docker-compose.yaml as its location.
2. Add PUBLIC_SITE_URL=https://your-domain.example.
3. Configure the public domain on the app service, port 3000, and deploy.

The Compose file passes PUBLIC_SITE_URL to both the image build and runtime, gives Chrome a 1 GB shared-memory segment, and exposes port 3000 only to Coolify's proxy rather than publishing it directly on the host.

The Docker build fails early if PUBLIC_SITE_URL is missing, the packaged browser cannot start, or the experimental HTML-in-Canvas API is unavailable. The runtime health check verifies the web process; use an actual export after deployment to verify the full path through the proxy.

MCP

claude mcp add --transport http devshot https://devshot.emadev.co/mcp

Tools: beautify_screenshot, beautify_snippet, beautify_website

The tool accepts base64 PNG, JPEG or WebP bytes and the same visual options as the UI. It requires no token or login and returns an MCP image content block.

Checks

pnpm test
pnpm check
pnpm build

MIT licensed.