DOMShot
DOMShot captures the exact card, chart, modal, button, or section you need. Use the Chrome extension to pick it by hand, or the agent package to find and capture useful UI elements from automation.
Watch the extension select a visible page element, preview the result, and export a clean PNG without cropping the full screen by hand.
DOMShot is for focused UI screenshots. The extension is the visual workflow. The agent package is the automation workflow.
Open DOMShot, hover the page, click the element you want, preview it, adjust the styling, and download a PNG.
@usedomshot/cliLet automation inspect a page, find likely UI elements, capture one or many polished shots, and return confidence, warnings, and paths.
The agent package is prepared for npm. After the npm package name and release are finalized, use DOMShot from scripts, shell commands, or MCP-compatible agent hosts.
npm install @usedomshot/cli
npx playwright install chromiumUse the Node API when your agent or script can import npm packages directly. The package is published on npm and can also provide the local CLI and MCP server.
Read API docsdomshot capture https://example.com \
--target "pricing card" \
--out shots/pricing.png \
--style autoAgents can ask for a useful UI target instead of knowing the selector first.
Read CLI docs{
"mcpServers": {
"domshot": {
"command": "domshot",
"args": ["mcp"]
}
}
}MCP hosts can call DOMShot tools to inspect pages, plan shots, and capture PNGs.
Read MCP docsChoose the piece you want directly on the page. It can be a card, popup, chart, button, or whole section.
Point at a card, popup, chart, or section. DOMShot captures that part of the page directly.
Preview the selected part, adjust the image, and save it as a PNG.
Move your cursor over the page and choose the exact part you want to save.
Check the image first, then adjust the spacing, background, and size.
Add space, a background, rounded corners, a shadow, or a larger export size.
Pick a page element, adjust the image, then download the PNG.
Open DOMShot and click the part of the page you want to capture.
Choose the background, spacing, shadow, size, and image quality.
Save the finished PNG for documentation, bug reports, updates, or review.
DOMShot should be the eyes and camera. An agent can inspect the page, ask for "pricing cards" or "balance card", review candidates, and save the best screenshots for docs, posts, or homepage sections.
await captureDomshot({
url: "https://example.com",
target: "pricing card",
output: "shots/pricing.png",
style: "auto"
});domshot shot-pack https://example.com \
--intent "homepage feature visuals" \
--target "feature cards" \
--out-dir shots/homepage \
--style autoMCP hosts can call DOMShot tools to inspect candidates, create contact sheets, capture sets, and return JSON metadata with paths, dimensions, confidence, and warnings.
Use a plain image when you just need to show something. Add a background and shadow when the image needs to look finished.
Save the selected part of the page with no extra styling.
Add space and a soft shadow so the capture stands out.
Add a colorful background and size controls for a shareable image.
Show just the thing you are talking about, whether a person picks it or an agent finds it.
Add a clear image of a feature, setting, or page section.
Show exactly what is broken, without the rest of the page getting in the way.
Turn a new feature or design change into a clean visual.
Share a focused image with teammates, clients, or stakeholders.
The extension handles page content locally when you start a capture and choose an element. The agent package runs in your own automation environment. DOMShot does not provide a hosted capture service.
Read the privacy policyAdd DOMShot to Chrome for visual captures, or use the agent package locally for automation workflows.