mcpField
W
website-screenshot

website-screenshot

github.com/html2pngProductivity1071 installsUpdated 39w ago
Repository

About website-screenshot

website-screenshot is a skill for workflows that need visual captures of live websites through html2png.dev. It supports full-page captures and configurable viewport, color scheme, and other capture settings.

Key features

  1. 01Capture live website screenshots
  2. 02Capture entire scrollable pages
  3. 03Output PNG, WebP, or PDF
  4. 04Adjust viewport and device scale
  5. 05Set delay and color scheme

Use cases

  1. 01Create full-page website captures
  2. 02Capture a mobile viewport
  3. 03Export a website as PDF

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/html2png/skills --skill website-screenshot

After installing, type/website-screenshotin Claude Code to confirm it loaded.

Details

From the project README

Website Screenshot API

Capture screenshots of any live website via html2png.dev.

Endpoint

POST https://html2png.dev/api/screenshot

Request

curl -X POST "https://html2png.dev/api/screenshot" \
  -H "Content-Type: application/json" \
  -d '{"url": "https://example.com", "width": 1280, "fullPage": true}'

Parameters

ParameterTypeDefaultDescription
urlstringrequiredWebsite URL to capture
widthint1280Viewport width
heightint800Viewport height
fullPageboolfalseCapture entire scrollable page
formatstringpngpng, webp, pdf
deviceScaleFactorfloat2Retina scale (1-4)
delayint0Wait ms before capture
omitBackgroundboolfalseTransparent bg
colorSchemestring-light or dark
userAgentstring-Custom user agent

Response

{
  "success": true,
  "url": "https://html2png.dev/api/blob/screenshot-abc.png",
  "format": "png",
  "timestamp": "2025-01-27T10:30:00.000Z"
}

Examples

Basic Screenshot
curl -X POST "https://html2png.dev/api/screenshot" \
  -H "Content-Type: application/json" \
  -d '{"url": "https://github.com"}'
Full Page Capture
curl -X POST "https://html2png.dev/api/screenshot" \
  -H "Content-Type: application/json" \
  -d '{"url": "https://example.com", "fullPage": true, "delay": 2000}'
Mobile Viewport
curl -X POST "https://html2png.dev/api/screenshot" \
  -H "Content-Type: application/json" \
  -d '{"url": "https://example.com", "width": 375, "height": 812, "deviceScaleFactor": 3}'
PDF Export
curl -X POST "https://html2png.dev/api/screenshot" \
  -H "Content-Type: application/json" \
  -d '{"url": "https://example.com", "format": "pdf", "fullPage": true}'
Dark Mode
curl -X POST "https://html2png.dev/api/screenshot" \
  -H "Content-Type: application/json" \
  -d '{"url": "https://example.com", "colorScheme": "dark"}'

JavaScript Example

const response = await fetch("https://html2png.dev/api/screenshot", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    url: "https://example.com",
    width: 1280,
    fullPage: true,
    delay: 1000,
  }),
});

const data = await response.json();
console.log(data.url);

Tips

  • Use delay for sites with heavy JavaScript or animations
  • fullPage captures the entire scrollable content
  • deviceScaleFactor=2 or higher for crisp text
  • No caching - each request captures fresh content

Rate Limits

50 requests/hour per IP.

Comments

Markdown supported