Introduction

ScreenFramed turns live URLs into polished product screenshots for docs, marketing pages, social posts, stores, and automation.

ScreenFramed is a design-first screenshot API and CLI. Give it a URL, then choose the visual treatment: device frame, background, aspect ratio, perspective, element crop, text overlay, output format, and automation mode.

The useful distinction is that ScreenFramed does not stop at a browser screenshot. It returns an image that is already usable in a launch page, changelog, help center, app store listing, directory card, or social post.

What you can build

Production screenshots

Capture complete pages with controlled viewport, wait behavior, blocked clutter, and repeatable output dimensions.

Learn More

Element captures

Capture one part of a page by CSS selector or by describing the element you want.

Learn More

Device mockups

Wrap screenshots in browser, iPhone, iPad, and MacBook frames with matching viewport defaults.

Learn More

Automated image pipelines

Re-render documentation screenshots, OG images, changelog assets, and store screenshots from scripts or CI.

Learn More

How ScreenFramed fits

flowchart LR
A[Live URL] --> B[Capture]
B --> C[Style]
C --> D[Store]
D --> E[CDN URL]
C --> F[PNG / WebP / JPG]

You can use ScreenFramed from:

The visual playground for one-off images and request prototyping.
The CLI for local workflows, docs refreshes, and batch jobs.
The REST API for product integrations and automated generation.

These docs focus on the product contract: request shapes, workflows, outputs, and operational behavior. Internal rendering details are intentionally not documented because they are not required to use the product well.

Core concepts

Concept	What it means
`url`	The page ScreenFramed captures. Required for every capture request.
`device`	Optional frame and viewport preset, such as `browser-macos`, `iphone-16-pro`, or `macbook-pro-16`.
`background_*`	Background controls: named gradients, solid colors, custom CSS gradients, image URLs, none, or transparent.
`aspect_ratio`	Final canvas ratio, such as `16:9`, `1:1`, or `9:16`.
`selector` / `element`	Capture a specific element instead of the full viewport.
`output`	Final format, width, height, quality, and device pixel ratio.
`async`	Queue longer renders and poll a job instead of waiting for a synchronous response.

Next steps

Quickstart

Make your first styled screenshot in a few minutes.

Learn More

Capture Basics

Learn the request model and common composition choices.

Learn More

API Reference

Explore endpoints, schemas, examples, and error handling.

Learn More

Was this page helpful?

Next Quickstart