Documentation

Use DOMShot from Chrome, code, the CLI, or MCP.

DOMShot captures one useful part of a webpage instead of the whole screen. Use the Chrome extension when a person wants to click the element by hand. Use the agent package when an AI agent or script needs to inspect the page, choose a good UI element, and save polished PNGs.

What DOMShot does

A normal screenshot gives you everything on the screen. DOMShot tries to give you only the thing you are talking about: a pricing card, a modal, a chart, a feature tile, a button, or a section of a page. It can keep the element transparent, add padding and shadow, or place it on a styled background for docs, launch notes, homepage sections, and product posts.

For people

Open the extension, click the element you want, adjust the image, and download a PNG.

For agents

Ask for a target like pricing card, inspect candidates, plan shots, and capture files locally.

For workflows

Generate one screenshot, a group of similar elements, or a full shot pack for a page section.

Chrome

Chrome extension

Best when you are looking at the page and want to choose the exact element yourself.

npm/API

Agent quickstart

Best when an app, script, or agent can import JavaScript and needs direct control.

CLI

Command line

Best when an agent can run shell commands and read JSON output.

MCP

MCP server

Best when your agent host supports MCP tools and should call DOMShot directly.

Help

Troubleshooting

Use this when the wrong element is chosen, the page needs login, or capture falls back.

Fast paths

These are the two quickest ways to start. The install command prepares the agent package and the local browser it uses. The capture command asks DOMShot to find a visible pricing card, style it, and write a PNG.

Install the agent package

Use this when you want DOMShot available to Node scripts, CLI commands, or MCP hosts.

npm install @domshot/agent
npx playwright install chromium

Expected result: the package is installed and Playwright has a local Chromium browser to run captures.

Capture a target from the CLI

Use this when you do not know the CSS selector and want DOMShot to find the element.

domshot capture https://example.com \
  --target "pricing card" \
  --out shots/pricing.png \
  --background transparent \
  --shadow soft

Expected result: shots/pricing.png plus JSON metadata with the chosen selector, dimensions, and warnings.

How to choose

I want to click the element myself.

Use the Chrome extension. It is the simplest visual workflow.

I want one exact element from code.

Use the Node API with selector if you know the CSS selector, or target if you only know what the element means.

I want an agent to make images for a section or post.

Use plan or shot-pack. The plan explains what should be captured; the shot pack writes final PNGs, a contact sheet, and a report.

I need a logged-in page.

Use CDP or profile mode so DOMShot can attach to a browser where you are already signed in.