How to Capture a Mobile-Width Website Screenshot with CaptureKit

To capture a website at mobile width with CaptureKit, make an authenticated GET request to https://api.capturekit.dev/v1/capture, pass the page URL, and set viewport_width to the desired width in CSS pixels. Set viewport_height when the height of the visible browser area matters. The documented width default is 1280 pixels, so specify a narrower width explicitly for a mobile-width capture. You need a CaptureKit API key in the x-api-key header.

The example below requests a 390 × 844 CSS-pixel viewport. These are sample dimensions; choose the width and height that match the layout you want to inspect. This controls a browser viewport through the API. It does not take a screenshot from a physical phone.

Capture a mobile-width viewport with cURL

Replace YOUR_API_KEY with your key and the example URL with the page you want to capture. The request saves a PNG of the visible viewport; full_page is off by default.

curl -G 'https://api.capturekit.dev/v1/capture' \
  -H 'x-api-key: YOUR_API_KEY' \
  --data-urlencode 'url=https://example.com' \
  --data-urlencode 'viewport_width=390' \
  --data-urlencode 'viewport_height=844' \
  --data-urlencode 'format=png' \
  -o mobile-viewport.png

URL-encoding the query parameters avoids problems with characters such as & in the target URL. Keep the API key private; do not put it in client-side code or a public repository.

Choose custom dimensions or a device preset

Use numeric viewport_width and viewport_height values when you need a specific viewport size. Use CaptureKit’s device option when you want one of its documented named device emulation presets. The endpoint lists presets for devices across iPhone, iPad, Galaxy, Pixel, Redmi, and Huawei families.

Choice	Use it when	What it specifies
`viewport_width` and `viewport_height`	You need an explicit or custom viewport size.	Numeric browser viewport dimensions in CSS pixels.
`device`	You want a named profile from CaptureKit’s supported preset list.	A documented device emulation preset.

A custom width alone does not claim to reproduce an exact phone model. If your goal is a particular preset, select that named device; if your goal is a particular layout breakpoint, set the dimensions directly. Check CaptureKit’s official documentation for the current endpoint parameter names and supported device values before relying on a preset.

Decide whether to capture the viewport or the whole page

Viewport width and page scope are separate settings. By default, full_page is false, which captures the initial visible viewport. Leave it off when you want to inspect what fits on screen without scrolling. Set full_page=true when you need the entire page in one output; CaptureKit also documents scroll-related behavior for loading lazy content during full-page captures.

For example, append --data-urlencode 'full_page=true' to the cURL command to request a full-page capture. A full-page image can be substantially taller than the initial viewport, so choose it only when the complete page is the intended artifact.

Set format and wait behavior

Output format

PNG is the documented default. CaptureKit also lists WebP, JPEG/JPG, and PDF. Select the format that fits the next step in your workflow. The image_quality option is documented for supported lossy image formats; use it when balancing image size and visible compression quality. Check the endpoint reference for accepted values and format-specific behavior.

Wait for the page you need

For pages that render asynchronously, CaptureKit documents wait_until choices including domcontentloaded, load, networkidle0, and networkidle2, as well as a fixed delay and wait_for_selector. There is no one wait setting that guarantees every site is ready:

Choose a documented wait_until state that matches the page’s loading behavior.
Use wait_for_selector when a particular element indicates that the content you need has appeared.
Use delay when the page needs a known extra settling period after its normal load event.

These controls affect when capture happens; they do not change the requested viewport dimensions. Consult the endpoint reference for the parameter formats accepted by the current API.

Python example

This runnable example uses requests. Install it with python -m pip install requests, set the API key in your environment, and run the script. It saves the response body as a PNG file when the request succeeds.

import os
import requests

api_key = os.environ["CAPTUREKIT_API_KEY"]
response = requests.get(
    "https://api.capturekit.dev/v1/capture",
    headers={"x-api-key": api_key},
    params={
        "url": "https://example.com",
        "viewport_width": 390,
        "viewport_height": 844,
        "format": "png",
    },
    timeout=90,
)
response.raise_for_status()
with open("mobile-viewport.png", "wb") as image_file:
    image_file.write(response.content)

Node.js example

This example uses the built-in fetch available in current Node.js releases. Set CAPTUREKIT_API_KEY before running it. It checks the HTTP status before writing the returned bytes.

const apiKey = process.env.CAPTUREKIT_API_KEY;
if (!apiKey) throw new Error("Set CAPTUREKIT_API_KEY first");

const query = new URLSearchParams({
  url: "https://example.com",
  viewport_width: "390",
  viewport_height: "844",
  format: "png",
});

const response = await fetch(
  `https://api.capturekit.dev/v1/capture?${query}`,
  { headers: { "x-api-key": apiKey } },
);

if (!response.ok) {
  throw new Error(`CaptureKit request failed: ${response.status} ${await response.text()}`);
}

const image = Buffer.from(await response.arrayBuffer());
await import("node:fs/promises").then(({ writeFile }) =>
  writeFile("mobile-viewport.png", image),
);

Other useful capture options

These options are not required to set a mobile width, but can help when the target page needs additional handling. Use the parameter names and accepted values in CaptureKit’s current endpoint reference.

selector targets an element for capture rather than the whole viewport.
remove_selectors and remove_ads can remove selected page content or ads.
Resource blocking and URL blocking options can prevent selected requests from loading.
Full-page captures have documented scroll-related behavior for lazy-loaded content.

Each option changes what appears or loads. Add only the controls needed for the page and output you are targeting, and keep the viewport dimensions explicit so the capture remains reproducible.

Or skip the browser setup

ScreenshotNeo captures a website through one API request. It removes cookie and consent banners, newsletter popups, and chat widgets before the shot; each cleanup step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers identify the page verdict and billing status. Its MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.

See the ScreenshotNeo API docs for the available options. This request captures the same example page as a WebP image:

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://example.com \
  -o shot.webp

Troubleshooting

Symptom	Likely cause	What to check or change
The result uses a desktop layout.	The request omitted `viewport_width` or used the documented 1280-pixel default.	Set an explicit mobile-width value and verify the URL-encoded request parameters.
The capture is shorter than expected.	`full_page` is false, its default.	Enable `full_page=true` if you need the whole page; otherwise set `viewport_height` to the visible height you intend to capture.
Content is missing from the image.	The page may render that content after the selected wait point, or the content may require scrolling.	Try a suitable documented `wait_until` value, wait for a relevant selector, or add a delay. For lazy content below the fold, use full-page capture and its documented scroll behavior.
The API rejects the request as unauthorized.	The API key may be missing, invalid, or sent in the wrong place.	Send a valid key using the `x-api-key` header and keep it out of public client-side code.
The request fails for a page URL with query parameters.	Reserved characters may have been interpreted as part of the API request instead of the target URL.	URL-encode the complete target URL. cURL’s `--data-urlencode` handles it in the example.
The output format or quality differs from what you expected.	The format may be the default PNG, or `image_quality` may not apply to the requested format.	Set a documented format explicitly and consult the endpoint reference for lossy-format quality support.

Performance, reliability, and cost considerations

Keep the capture scope appropriate. A visible-viewport capture requests less page content than a whole-page capture. Use full-page mode when the whole page is needed.
Wait for a meaningful condition. A selector tied to the content you need can be more targeted than adding an arbitrary delay. Choose the documented wait behavior based on the site.
Plan for variable page behavior. Third-party scripts, lazy loading, and site changes can affect what is ready at capture time. The dossier documents CaptureKit options, not a universal rendering guarantee or a measured latency.
Protect credentials. Keep the API key server-side or in a secret store, and avoid logging it with request details.
Check current pricing separately. The available CaptureKit research supports the endpoint workflow and options but does not establish current pricing, quotas, or a verified commercial program. Review CaptureKit’s official materials before estimating spend.

FAQ

Does a mobile-width capture require a phone?

No. This workflow sets browser viewport dimensions through CaptureKit’s API. The dossier does not describe it as a capture from physical phone hardware.

Is 390 pixels required?

No. It is only an illustrative width. Set the width that corresponds to the layout you want to inspect, or use a supported named device preset.

Does mobile width automatically capture the whole page?

No. Width and page scope are independent. full_page defaults to false.

Can I use a custom width and a device preset together?

The available documentation distinguishes explicit dimensions from named device selection. Choose the documented mode that fits the capture you need and check the endpoint reference for supported combinations.