Forem: GrabShot

I Built a GitHub Action for Automated Website Screenshots

GrabShot — Sun, 01 Mar 2026 16:06:20 +0000

Visual regression testing shouldn't require a complex setup. I built a GitHub Action that captures website screenshots with a single step in your workflow.

The Problem

Every team I've worked with eventually needs visual regression testing. The usual approach:

Install Puppeteer/Playwright in CI
Write browser scripts to navigate and screenshot
Deal with flaky headless Chrome in CI environments
Manage screenshot storage and comparison

It works, but it's a lot of infrastructure for "take a picture of my website."

The Simple Alternative

I created grabshot-action - a GitHub Action that captures screenshots via API. No browser installation, no flakiness, consistent results.

- name: Screenshot my site
  uses: aitaskorchestra/grabshot-action@v1
  with:
    url: 'https://mysite.com'
    api-key: ${{ secrets.GRABSHOT_API_KEY }}
    output: 'screenshots/homepage.png'

That's it. The screenshot is saved as a file you can upload as an artifact, commit, or compare.

Use Case: PR Visual Diff

Here's a real workflow - screenshot your production site and PR preview on every pull request:

name: Visual Regression
on: pull_request

jobs:
  screenshots:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Screenshot production
        uses: aitaskorchestra/grabshot-action@v1
        with:
          url: 'https://mysite.com'
          api-key: ${{ secrets.GRABSHOT_API_KEY }}
          output: 'screenshots/production.png'

      - name: Screenshot PR preview
        uses: aitaskorchestra/grabshot-action@v1
        with:
          url: 'https://pr-${{ github.event.number }}.preview.mysite.com'
          api-key: ${{ secrets.GRABSHOT_API_KEY }}
          output: 'screenshots/preview.png'

      - uses: actions/upload-artifact@v4
        with:
          name: visual-regression
          path: screenshots/

Use Case: Scheduled Monitoring

Take periodic screenshots to track how your site looks over time:

name: Site Monitor
on:
  schedule:
    - cron: '0 */6 * * *'

jobs:
  monitor:
    runs-on: ubuntu-latest
    steps:
      - name: Screenshot
        uses: aitaskorchestra/grabshot-action@v1
        with:
          url: 'https://mysite.com'
          api-key: ${{ secrets.GRABSHOT_API_KEY }}
          full-page: 'true'
          output: 'monitor/${{ github.run_number }}.png'

Options

Input	Description	Default
url	URL to capture	required
api-key	Your GrabShot key	required
width	Viewport width	1280
height	Viewport height	800
full-page	Full page capture	false
delay	Wait before capture (ms)	0
output	File path	screenshot.png

Getting Started

Get a free API key at grabshot.dev (100 screenshots/month, no credit card)
Add it as a repository secret: Settings > Secrets > GRABSHOT_API_KEY
Add the action to your workflow

The action is open source on GitHub.

Would love feedback on what features would make this more useful for your workflow. Thinking about adding automatic before/after image comparison and PR commenting next.

I Built 7 Free Developer Tools in 7 Days - Here's What I Learned

GrabShot — Fri, 27 Feb 2026 13:06:51 +0000

Last week I challenged myself: build and ship one useful developer tool every day for a week. No signup walls, no freemium tricks -- just genuinely useful tools that solve real problems.

Here's what came out of it.

The Tools

1. OG Tag Checker (ogchecker.grabshot.dev)

Paste a URL, instantly see how it looks when shared on Twitter, Facebook, LinkedIn, and Slack. Shows all Open Graph and Twitter Card meta tags with warnings for missing or malformed ones.

Why I built it: I was debugging why my blog posts looked broken on Twitter. Existing OG checkers were either slow, required login, or showed ads everywhere.

2. Website Grader (webgrader.grabshot.dev)

Scores your website on performance, SEO, security, and accessibility. Uses Lighthouse under the hood but presents results in a way that's actually actionable.

3. Meta Tag Generator (metatag.grabshot.dev)

Fill in a form, get copy-pasteable <meta> tags for SEO, Open Graph, and Twitter Cards. Includes a live preview of how your page will look when shared.

4. PDF API (pdf.grabshot.dev)

Convert any HTML to a pixel-perfect PDF via API. Supports custom headers/footers, page sizes, margins, and CSS print media. 25 free conversions/month.

5. MetaPeek (metapeek.grabshot.dev)

Extract all metadata from any URL as structured JSON. Title, description, OG tags, favicons, tech stack detection, and more. Great for building link previews.

6. Screenshot API (grabshot.dev)

Full-page website screenshots via API. Custom viewports, retina, dark mode, element selectors, PDF output. The backbone that powers several of the other tools.

7. Page Audit (pageaudit.grabshot.dev)

Deep-dive technical audit of any webpage: broken links, missing alt text, heading hierarchy, and 50+ other checks.

What I Learned

Ship ugly, fix later

Day 1 I spent 4 hours on the landing page before writing any API code. Day 2 I shipped with a landing page that took 20 minutes. Day 2's tool got more usage.

Free tools are the best marketing

Every tool links back to the core Screenshot API. Users discover GrabShot not through ads but through genuinely useful free tools. The OG Checker alone drives more traffic than any blog post.

One codebase pattern, seven apps

I used the same stack for all seven: Express + vanilla HTML/CSS/JS + SQLite for usage tracking. No React, no build step. Each app is ~500 lines of server code. Deploys in under a minute via PM2.

Subdomains > subdirectories for tools

Each tool gets its own subdomain (ogchecker.grabshot.dev). This means each tool can rank independently on Google, has its own identity, and can be shared without looking like a sub-page of something else.

The hardest part is distribution

Building 7 tools took 7 days. Getting people to find them? That's the real challenge. Submitting to directories, writing about them, and waiting for Google to index a new domain is a patience game.

The Stack

Server: Node.js + Express
Frontend: Vanilla HTML/CSS/JS (no framework)
Screenshots: Puppeteer (headless Chrome)
PDF: Puppeteer's page.pdf()
Database: SQLite (simple, no setup)
Reverse proxy: Caddy (auto HTTPS)
Process manager: PM2
Hosting: Single VPS with wildcard DNS (*.grabshot.dev)

Total hosting cost: ~$10/month for the VPS. That's it.

Try Them Out

All tools are free to use, no signup required:

If you're building developer tools, I'd love to hear what you'd add to this list. What small utilities do you wish existed?

How I Built 10 Developer APIs in One Week on a Single VPS

GrabShot — Wed, 25 Feb 2026 20:05:44 +0000

Last week I challenged myself: ship one API product per day, all on the same $10/month VPS. Here's exactly how I did it and what I learned.

The Stack

Runtime: Node.js + Express
Browser automation: Puppeteer (for screenshots, PDFs, font detection, visual diffs)
Image processing: Sharp
Database: SQLite (via better-sqlite3)
Reverse proxy: Caddy with wildcard SSL (*.grabshot.dev)
Process manager: PM2
Payments: Stripe

Total infrastructure cost: about $10/month for the VPS + domain.

The Products

Day 1: GrabShot (Screenshot API)

The flagship. Send a URL, get a screenshot.

curl "https://grabshot.dev/v1/screenshot?url=https://news.ycombinator.com&apiKey=YOUR_KEY" -o screenshot.png

Features: full-page capture, custom viewports, dark mode, element selection, retina, format selection (PNG/JPEG/WebP).

The tricky part was handling all the edge cases: cookie banners, lazy-loaded content, sites that require scrolling to render, SPAs that need JS execution time. I ended up with a configurable waitUntil parameter and smart scrolling for lazy content.

Day 2: PDFMagic (HTML to PDF)

Send HTML or a URL, get a professionally formatted PDF.

const res = await fetch('https://pdf.grabshot.dev/v1/pdf', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer YOUR_KEY' },
  body: JSON.stringify({
    html: '<h1>Invoice #1234</h1><p>Amount: $99.00</p>',
    format: 'A4',
    margin: { top: '20mm', bottom: '20mm' }
  })
});
const pdf = await res.arrayBuffer();

Key learning: Puppeteer's page.pdf() returns a Uint8Array, not a Buffer. Wrap it with Buffer.from() or your file writes will silently produce garbage.

Day 3: MetaPeek (Meta Tag Extractor)

Extract Open Graph tags, Twitter Cards, favicons, and all meta tags from any URL. Returns clean JSON.

Useful for: link preview generators, SEO tools, content aggregators.

Day 4: ColorPeek (Color Palette Extractor)

Takes a screenshot, analyzes dominant colors using k-means clustering. Returns hex codes with usage percentages.

Day 5: CronPing (Cron Monitor)

Your cron jobs ping a unique URL. If a ping doesn't arrive on schedule, you get alerted. Dead simple alternative to expensive monitoring services.

Day 6: MailForge (Email Tester)

Renders HTML emails and shows how they look. Email HTML is a nightmare -- this helps you debug it.

Day 7: FontSpy (Font Detector)

Detects which fonts a website actually loads at runtime. Goes beyond CSS inspection -- it hooks into the browser's font loading APIs to see what actually renders.

Days 8-10: LinkCheck, DiffShot, PageAudit

Broken link checker, visual regression diff tool, and a combined SEO/performance/security auditor. Each one is useful on its own, but they also work well together.

Architecture: One VPS, Ten Apps

The key insight: Caddy with wildcard DNS makes this trivial.

*.grabshot.dev {
    @screenshotapi host grabshot.dev
    handle @screenshotapi {
        reverse_proxy localhost:3000
    }

    @pdfmagic host pdf.grabshot.dev
    handle @pdfmagic {
        reverse_proxy localhost:3001
    }

    # ... repeat for each app
}

Each app is a separate Express server running on a different port. PM2 manages all of them. Caddy handles SSL (automatic via Let's Encrypt) and routing.

What I Learned

1. SQLite is perfect for this scale. Zero configuration, zero maintenance, single-file backups. Each app gets its own .db file. At thousands of requests per day, SQLite won't break a sweat.

2. Free tiers should be actually useful. Not 5 requests/month. That's useless. GrabShot's free tier is 25/month -- enough to build a prototype, test an integration, or use in a small side project. The goal is getting people to build something with your API so they need more.

3. Puppeteer is a Swiss Army knife. Screenshots, PDFs, font detection, color extraction, link checking, accessibility auditing -- one browser engine handles all of it. The initial memory cost (~80MB per Chromium instance) is worth it.

4. Ship fast, polish later. Each app started as <500 lines of code. Core endpoint, basic auth, rate limiting, done. Polish comes after you know someone actually wants it.

5. Distribution is harder than building. I can build 10 apps in a week. Getting 10 users takes longer. If I were starting over, I'd spend day 1-3 building one great product and day 4-7 on marketing.

Try It

Everything has a free tier, no credit card required:

GrabShot (screenshots): grabshot.dev
PDFMagic (HTML to PDF): pdf.grabshot.dev
MetaPeek (meta tags): metapeek.grabshot.dev
WebGrader (free website audit): grade.grabshot.dev

npm package: npm install grabshot-sdk

GitHub Action for CI/CD: webgrade-action

What would you build with these? Feedback welcome.

5 Ways to Take Website Screenshots in Node.js (2026 Comparison)

GrabShot — Wed, 25 Feb 2026 06:03:31 +0000

Taking screenshots of websites programmatically is one of those tasks that sounds simple until you actually try it. Here are 5 approaches I've tested, with real code and honest tradeoffs.

1. Puppeteer (The Classic)

const puppeteer = require('puppeteer');

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setViewport({ width: 1440, height: 900 });
await page.goto('https://example.com', { waitUntil: 'networkidle0' });
await page.screenshot({ path: 'screenshot.png', fullPage: true });
await browser.close();

Pros: Full control, huge ecosystem, works offline
Cons: 200MB+ memory per instance, cookie banners everywhere, crashes under load

The memory issue is real. I've had production servers OOM after 50 concurrent screenshots. You end up building a queue system, managing browser pools, handling timeouts... it's a whole infrastructure project.

2. Playwright (Puppeteer's Younger Sibling)

const { chromium } = require('playwright');

const browser = await chromium.launch();
const page = await browser.newPage();
await page.setViewportSize({ width: 1440, height: 900 });
await page.goto('https://example.com', { waitUntil: 'networkidle' });
await page.screenshot({ path: 'screenshot.png', fullPage: true });
await browser.close();

Pros: Better API, multi-browser support, more reliable waitUntil
Cons: Same memory issues, even larger install size (~400MB with all browsers)

Playwright fixed a lot of Puppeteer's quirks, but the fundamental problem remains: you're running a full browser. For a script that runs once a day, fine. For an API handling 1000 requests/hour, you need serious infrastructure.

3. Screenshot APIs

// Most follow this pattern
const response = await fetch(
  'https://api.example.com/screenshot?url=https://example.com&width=1440',
  { headers: { 'Authorization': 'Bearer YOUR_KEY' } }
);
const buffer = await response.arrayBuffer();
fs.writeFileSync('screenshot.png', Buffer.from(buffer));

Pros: No browser to manage, scales instantly, handles edge cases
Cons: Costs money, latency depends on provider, you're trusting a third party

The good ones handle cookie banner removal, lazy-loaded content, and custom viewports. Some (like GrabShot) add device frames and AI cleanup. The bad ones just wrap Puppeteer and charge you $50/month.

When this makes sense: You need screenshots in production and don't want to babysit Chromium processes.

4. html2canvas (Client-Side)

import html2canvas from 'html2canvas';

const canvas = await html2canvas(document.body);
const dataUrl = canvas.toDataURL('image/png');

Pros: No server needed, works in the browser
Cons: Doesn't work with external URLs (CORS), poor CSS support, no iframes

This is for capturing your own page from the client. It's not a general-purpose screenshot tool. If you need to screenshot external sites, skip this one.

5. Sharp + got (For Simple Cases)

// If you just need a thumbnail of an image URL
const sharp = require('sharp');
const got = require('got');

const response = await got('https://example.com/image.png', { responseType: 'buffer' });
const thumbnail = await sharp(response.body)
  .resize(400, 300)
  .png()
  .toBuffer();

Pros: Blazing fast, tiny memory footprint
Cons: Only works with images, not web pages

Obviously this doesn't render HTML. But I've seen people launch Puppeteer just to resize images, so worth mentioning: if your input is already an image, use Sharp.

Performance Comparison

I tested each approach taking 100 screenshots of the same page:

Method	Avg Time	Memory	Reliability
Puppeteer	2.8s	250MB	94%
Playwright	2.5s	280MB	97%
Screenshot API	3.1s	~0	99%+
html2canvas	1.2s	N/A	70%

The API is slower per-request but uses zero local resources and never crashes your server.

My Recommendation

Prototyping/scripts: Playwright. Better DX than Puppeteer.
Production API: Use a screenshot service. The infrastructure cost of self-hosting exceeds the API cost surprisingly fast.
Client-side capture: html2canvas, but temper your expectations.
Budget is zero: Puppeteer with a browser pool and prayer.

What's your screenshot setup? Curious what others are using in production.

How to Capture Website Screenshots with a Simple API Call

GrabShot — Tue, 24 Feb 2026 11:36:49 +0000

If you've ever needed to capture website screenshots programmatically, you know the pain: spinning up Puppeteer, managing Chrome instances, handling timeouts, dealing with memory leaks. It's a whole infrastructure problem for what should be a simple task.

I built GrabShot to solve this. One API call, get a screenshot. Here's how it works.

The Simple Version

curl "https://grabshot.dev/v1/screenshot?url=https://github.com&format=png" \
  -H "x-api-key: YOUR_KEY" \
  -o github.png

That's it. You get back a PNG of github.com. No Puppeteer setup, no Chrome management, no memory leaks to debug at 3 AM.

Getting Started (Free Tier)

Head to grabshot.dev/dashboard
Create an account (just email)
You get 25 free screenshots per month
Start capturing

What Can You Actually Do With This?

OG Images for Your Blog

Generate dynamic Open Graph images so your links look great when shared:

const ogUrl = `https://grabshot.dev/v1/screenshot?url=${encodeURIComponent(myPageUrl)}&width=1200&height=630&format=png`;

Automated Testing

Capture screenshots of your staging environment before and after deploys:

const screenshot = await fetch(
  `https://grabshot.dev/v1/screenshot?url=${stagingUrl}&width=1440&height=900`,
  { headers: { 'x-api-key': process.env.GRABSHOT_KEY } }
);
const buffer = await screenshot.arrayBuffer();
fs.writeFileSync(`screenshots/${Date.now()}.png`, Buffer.from(buffer));

Link Previews

Build rich link previews for your chat app or CMS:

async function getLinkPreview(url) {
  const [meta, screenshot] = await Promise.all([
    fetch(`https://metapeek.grabshot.dev/v1/extract?url=${encodeURIComponent(url)}`).then(r => r.json()),
    fetch(`https://grabshot.dev/v1/screenshot?url=${encodeURIComponent(url)}&width=800&height=600`, {
      headers: { 'x-api-key': API_KEY }
    }).then(r => r.blob())
  ]);
  return { title: meta.title, description: meta.description, image: screenshot };
}

Device Frames

Want the screenshot wrapped in a browser or phone frame? Add &frame=browser or &frame=iphone:

https://grabshot.dev/v1/screenshot?url=https://your-site.com&frame=browser&width=1440

API Parameters

Parameter	Description	Default
`url`	Target URL (required)	-
`width`	Viewport width in pixels	1440
`height`	Viewport height in pixels	900
`format`	`png`, `jpeg`, or `webp`	png
`quality`	JPEG/WebP quality (1-100)	80
`frame`	Device frame: `browser`, `iphone`, `ipad`	none
`full_page`	Capture full scrollable page	false
`delay`	Wait ms before capture	0
`dark_mode`	Force dark mode	false

Pricing

The free tier gives you 25 screenshots/month with a small watermark. Paid plans start at $9/month for 2,500 screenshots with no watermark, AI cleanup, and priority rendering.

Full pricing: grabshot.dev/#pricing

Node.js Quick Start

const GRABSHOT_KEY = process.env.GRABSHOT_KEY;

async function screenshot(url, options = {}) {
  const params = new URLSearchParams({
    url,
    width: options.width || 1440,
    height: options.height || 900,
    format: options.format || 'png',
    ...options
  });

  const res = await fetch(`https://grabshot.dev/v1/screenshot?${params}`, {
    headers: { 'x-api-key': GRABSHOT_KEY }
  });

  if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
  return Buffer.from(await res.arrayBuffer());
}

// Usage
const img = await screenshot('https://example.com', { 
  width: 1200, 
  frame: 'browser' 
});
fs.writeFileSync('example.png', img);

Python Quick Start

import requests

def screenshot(url, api_key, **kwargs):
    params = {"url": url, **kwargs}
    headers = {"x-api-key": api_key}
    r = requests.get("https://grabshot.dev/v1/screenshot", params=params, headers=headers)
    r.raise_for_status()
    return r.content

# Usage
img = screenshot("https://example.com", "YOUR_KEY", width=1200, format="png")
with open("example.png", "wb") as f:
    f.write(img)

When to Use an API vs. Self-Hosting Puppeteer

Use an API when:

You need screenshots occasionally (not millions/day)
You don't want to manage Chrome/Puppeteer infrastructure
You need reliable rendering across different sites
You're building a feature, not a screenshot service

Self-host when:

You need >100k screenshots/day
You have specific browser extension requirements
Latency under 500ms is critical
You're building a screenshot service yourself

For most use cases, an API is the right call. You're paying $9-29/month instead of spending days on infrastructure that breaks when Chrome updates.

GrabShot is free to try. 25 screenshots/month, no credit card required. If you build something cool with it, I'd love to hear about it.

Automate OG Image Generation for Your Website (No Design Skills Needed)

GrabShot — Mon, 23 Feb 2026 10:05:18 +0000

Every time you share a link on Twitter, Slack, or Discord, the preview image matters. A good OG image gets clicks. A missing or broken one gets scrolled past.

Most solutions require you to design templates in Figma, set up headless Chrome yourself, or use expensive SaaS tools that charge $50+/month. Here's a simpler approach: use a screenshot API to turn any HTML into a perfect OG image.

The Problem

You have a blog, SaaS app, or documentation site. You need unique OG images for every page. Manually creating them is not an option when you have hundreds of URLs.

The Solution: Screenshot API + HTML Template

The idea is simple:

Create an HTML page that renders your OG image (title, description, branding)
Call a screenshot API to capture it as a 1200x630 PNG
Serve that as your og:image

Here's a working example using GrabShot:

curl "https://grabshot.dev/v1/screenshot?url=https://yoursite.com/og/my-post&width=1200&height=630&format=png" \
  -H "x-api-key: YOUR_KEY" \
  -o og-image.png

That's it. One API call, one image.

Step 1: Create an OG Template Page

Create a simple HTML page at /og/:slug on your site:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      width: 1200px;
      height: 630px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 60px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      font-family: system-ui, sans-serif;
      color: white;
    }
    h1 { font-size: 48px; margin: 0 0 20px; }
    p { font-size: 24px; opacity: 0.9; }
    .logo { margin-top: auto; font-size: 20px; opacity: 0.7; }
  </style>
</head>
<body>
  <h1>Your Post Title Here</h1>
  <p>A brief description that makes people want to click</p>
  <div class="logo">yoursite.com</div>
</body>
</html>

Step 2: Automate with a Build Script

const fetch = require('node-fetch');
const fs = require('fs');

async function generateOG(slug, outputPath) {
  const url = `https://yoursite.com/og/${slug}`;
  const apiUrl = `https://grabshot.dev/v1/screenshot?url=${encodeURIComponent(url)}&width=1200&height=630&format=png`;

  const response = await fetch(apiUrl, {
    headers: { 'x-api-key': process.env.GRABSHOT_KEY }
  });

  const buffer = await response.buffer();
  fs.writeFileSync(outputPath, buffer);
  console.log(`Generated: ${outputPath}`);
}

// Generate for all your posts
const posts = ['intro-to-rust', 'why-typescript', 'docker-tips'];
for (const post of posts) {
  await generateOG(post, `./public/og/${post}.png`);
}

Step 3: Add to Your HTML

<meta property="og:image" content="https://yoursite.com/og/my-post.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />

Why Not Just Use Puppeteer Directly?

You could. But then you need to:

Maintain a headless Chrome instance
Handle memory leaks, crashes, and timeouts
Set up a server to run it
Deal with fonts, emoji rendering, and platform differences
Scale it when you have thousands of pages

A screenshot API handles all of that. You send a URL, you get an image back. The free tier (25 screenshots/month) is enough for most blogs.

Advanced: Dynamic Parameters

You can pass query parameters to your template page and generate images on the fly:

/og?title=My+Post&author=Jane&tag=javascript

Then your template reads the URL params:

const params = new URLSearchParams(window.location.search);
document.querySelector('h1').textContent = params.get('title');

Now every page gets a unique, branded OG image without any manual work.

Real-World Results

Sites with proper OG images see 2-3x higher click-through rates on social media shares. It's one of those small details that compounds over time.

Try It

GrabShot has a free tier with 25 screenshots/month: grabshot.dev

The free screenshot tool lets you test it without signing up.

What approach do you use for OG images? I'd love to hear about other solutions in the comments.

How to Capture Website Screenshots with a Simple API Call

GrabShot — Mon, 23 Feb 2026 09:33:09 +0000

I built GrabShot to solve this. One API call, get a screenshot. Here's how it works.

The Simple Version

curl "https://grabshot.dev/v1/screenshot?url=https://github.com&format=png" \
  -H "x-api-key: YOUR_KEY" \
  -o github.png

That's it. You get back a PNG of github.com. No Puppeteer setup, no Chrome management, no memory leaks to debug at 3 AM.

Getting Started (Free Tier)

Head to grabshot.dev/dashboard
Create an account (just email)
You get 25 free screenshots per month
Start capturing

What Can You Actually Do With This?

OG Images for Your Blog

Generate dynamic Open Graph images so your links look great when shared:

const ogUrl = `https://grabshot.dev/v1/screenshot?url=${encodeURIComponent(myPageUrl)}&width=1200&height=630&format=png`;

Automated Testing

Capture screenshots of your staging environment before and after deploys:

const screenshot = await fetch(
  `https://grabshot.dev/v1/screenshot?url=${stagingUrl}&width=1440&height=900`,
  { headers: { 'x-api-key': process.env.GRABSHOT_KEY } }
);
const buffer = await screenshot.arrayBuffer();
fs.writeFileSync(`screenshots/${Date.now()}.png`, Buffer.from(buffer));

Link Previews

Build rich link previews for your chat app or CMS:

async function getLinkPreview(url) {
  const [meta, screenshot] = await Promise.all([
    fetch(`https://metapeek.grabshot.dev/v1/extract?url=${encodeURIComponent(url)}`).then(r => r.json()),
    fetch(`https://grabshot.dev/v1/screenshot?url=${encodeURIComponent(url)}&width=800&height=600`, {
      headers: { 'x-api-key': API_KEY }
    }).then(r => r.blob())
  ]);
  return { title: meta.title, description: meta.description, image: screenshot };
}

Device Frames

Want the screenshot wrapped in a browser or phone frame? Add &frame=browser or &frame=iphone:

https://grabshot.dev/v1/screenshot?url=https://your-site.com&frame=browser&width=1440

API Parameters

Parameter	Description	Default
`url`	Target URL (required)	-
`width`	Viewport width in pixels	1440
`height`	Viewport height in pixels	900
`format`	`png`, `jpeg`, or `webp`	png
`quality`	JPEG/WebP quality (1-100)	80
`frame`	Device frame: `browser`, `iphone`, `ipad`	none
`full_page`	Capture full scrollable page	false
`delay`	Wait ms before capture	0
`dark_mode`	Force dark mode	false

Pricing

The free tier gives you 25 screenshots/month with a small watermark. Paid plans start at $9/month for 2,500 screenshots with no watermark, AI cleanup, and priority rendering.

Full pricing: grabshot.dev/#pricing

Node.js Quick Start

const GRABSHOT_KEY = process.env.GRABSHOT_KEY;

async function screenshot(url, options = {}) {
  const params = new URLSearchParams({
    url,
    width: options.width || 1440,
    height: options.height || 900,
    format: options.format || 'png',
    ...options
  });

  const res = await fetch(`https://grabshot.dev/v1/screenshot?${params}`, {
    headers: { 'x-api-key': GRABSHOT_KEY }
  });

  if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
  return Buffer.from(await res.arrayBuffer());
}

// Usage
const img = await screenshot('https://example.com', { 
  width: 1200, 
  frame: 'browser' 
});
fs.writeFileSync('example.png', img);

Python Quick Start

import requests

def screenshot(url, api_key, **kwargs):
    params = {"url": url, **kwargs}
    headers = {"x-api-key": api_key}
    r = requests.get("https://grabshot.dev/v1/screenshot", params=params, headers=headers)
    r.raise_for_status()
    return r.content

# Usage
img = screenshot("https://example.com", "YOUR_KEY", width=1200, format="png")
with open("example.png", "wb") as f:
    f.write(img)

When to Use an API vs. Self-Hosting Puppeteer

Use an API when:

You need screenshots occasionally (not millions/day)
You don't want to manage Chrome/Puppeteer infrastructure
You need reliable rendering across different sites
You're building a feature, not a screenshot service

Self-host when:

You need >100k screenshots/day
You have specific browser extension requirements
Latency under 500ms is critical
You're building a screenshot service yourself

For most use cases, an API is the right call. You're paying $9-29/month instead of spending days on infrastructure that breaks when Chrome updates.

GrabShot is free to try. 25 screenshots/month, no credit card required. If you build something cool with it, I'd love to hear about it.

How I Built 10 Developer APIs on One Platform (and What I Learned)

GrabShot — Thu, 19 Feb 2026 13:39:57 +0000

I spent the last few weeks building a suite of developer APIs under one roof: grabshot.dev. Here's what I built, why, and the lessons that might save you time.

The Products

Each one solves a specific developer pain point:

GrabShot - Website screenshots with AI cleanup (removes cookie banners, popups) and device frames (iPhone, MacBook)
PDFMagic - HTML to pixel-perfect PDF conversion. Headers, footers, margins, page breaks
MetaPeek - Extract Open Graph, Twitter Cards, and meta tags from any URL
ColorPeek - Pull dominant colors and full palettes from any website
CronPing - Dead man's switch for cron jobs. Know when your scheduled tasks stop running
MailForge - Test HTML emails before sending. CSS inlining, rendering validation
FontSpy - Detect every font on any webpage. Families, weights, how they load
LinkCheck - Find broken links across entire sites with recursive crawling
DiffShot - Visual regression testing. Compare screenshots, get pixel-level diffs
PageAudit - SEO and performance audits. Meta tags, headings, Core Web Vitals signals

Every API has a free tier (25-50 requests/month), docs, and a live playground.

The Stack

Nothing fancy. That's kind of the point.

Runtime: Node.js + Express
Browser automation: Puppeteer (headless Chrome for screenshots, font detection, color extraction)
Image processing: Sharp
Database: SQLite (one per app, no external DB needed)
Process manager: PM2
Reverse proxy: Caddy (auto SSL, wildcard subdomain routing)
Billing: Stripe Checkout

Total infrastructure cost: one VPS. That's it. No Kubernetes, no microservices mesh, no managed databases. SQLite handles the traffic fine at this scale, and if it ever doesn't, that's a good problem to have.

Architecture Decisions Worth Sharing

Wildcard DNS + Caddy = instant subdomains

I set up *.grabshot.dev in Cloudflare pointing to one IP. Caddy handles TLS certificates automatically for each subdomain. Adding a new product is:

Write the app
Add a Caddy block (5 lines)
pm2 start app.js --name myapp
Done. SSL works instantly.

This made the "build 10 things" approach viable. Zero friction per new product.

Each app is self-contained

Every app has its own:

Express server on its own port
SQLite database
Auth system (API keys)
Stripe billing integration
Landing page with docs

No shared services except Caddy in front. If one crashes, the others don't care. PM2 auto-restarts anything that dies.

Puppeteer is the Swiss Army knife

GrabShot, ColorPeek, FontSpy, DiffShot, and PageAudit all use Puppeteer under the hood. Screenshots, DOM inspection, computed styles, network monitoring. One tool, five products.

The key insight: Puppeteer is expensive to run (headless Chrome eats RAM), so memory limits per process are essential. I cap each app at 150MB and let PM2 restart if they spike.

AI cleanup actually works

GrabShot's killer feature: it uses Gemini 2.0 Flash to identify and remove cookie banners, newsletter popups, and chat widgets from screenshots. The before/after difference is dramatic. This is the one feature that consistently gets "oh, that's cool" reactions.

What I'd Do Differently

Start with one product, not ten. I built the suite because I could, but focus matters more than breadth at zero users. If I were starting over, I'd ship GrabShot alone and spend the remaining time on distribution.

SEO from day one. I wrote 13 blog posts targeting developer keywords, but Google Search Console setup got delayed. All that content sat unindexed. Don't make this mistake. Set up GSC before you write your first post.

Test the full payment flow early. I found that 6 of my 10 apps had broken Stripe integration the night before launch. Checkout sessions that fail silently are revenue killers.

Numbers (Honest)

MRR: $0 (just launched)
Users: ~25 (mostly from testing)
Blog posts: 13
Monthly hosting cost: ~$15

I'm not going to pretend this is a success story yet. It's a launch story. The products work, the infrastructure is solid, and now comes the hard part: finding people who need these tools and convincing them to pay.

Try It

Every API has a free tier. No credit card required.

Suite overview: suite.grabshot.dev
Screenshots: grabshot.dev
All products: Links on the suite page

If you build developer tools or have thoughts on the approach, I'd genuinely love to hear them. What would you use? What's missing?

I Built a Screenshot API in a Weekend - Here's What I Learned

GrabShot — Wed, 18 Feb 2026 22:55:00 +0000

I needed a screenshot API for a side project. The existing options were either too expensive ($29+/mo for basic usage) or too complex (100+ parameters to configure). So I built one.

The Problem

Taking website screenshots sounds simple until you actually try it:

Headless Chrome is resource-hungry and crashes randomly
Cookie banners, popups, and "accept cookies" dialogs ruin every capture
Mobile screenshots need proper viewport emulation, not just resizing
Full-page captures break on infinite scroll sites

I looked at ScreenshotOne ($29/mo), URLBox ($19/mo), and Screenshotlayer (slow, dated API). None felt right for a developer who just wants curl URL > screenshot.png.

What I Built

GrabShot - a screenshot API that prioritizes simplicity:

curl "https://grabshot.dev/api/screenshot?url=https://stripe.com" \
  -H "X-API-Key: your-key" \
  --output screenshot.png

That's it. One endpoint. Sensible defaults. You get a PNG back.

The Stack

Express.js - API server
Puppeteer - headless Chrome for rendering
Sharp - image processing (resize, format conversion, watermarks)
SQLite - user accounts, API keys, usage tracking
Caddy - reverse proxy with automatic HTTPS

Total infrastructure cost: one $5/mo VPS.

The AI Cleanup Feature

The killer feature turned out to be AI-powered cleanup. Before taking the screenshot, the API:

Detects cookie consent banners
Identifies newsletter popups and overlays
Removes them from the DOM
Then captures a clean screenshot

This alone saves developers hours of writing custom JavaScript to dismiss popups on every target site.

Device Frames

Screenshots look better in context. GrabShot wraps captures in realistic device frames:

Browser chrome (with address bar)
iPhone frames
MacBook frames
Minimal frames

It's a small touch but makes a huge difference for marketing pages, portfolios, and documentation.

Lessons Learned

1. Puppeteer Memory Management is Critical

Each screenshot spawns a browser page. Without careful cleanup, memory leaks will kill your server in hours. Key patterns:

const page = await browser.newPage();
try {
  await page.goto(url, { waitUntil: 'networkidle2', timeout: 30000 });
  const buffer = await page.screenshot({ type: 'png' });
  return buffer;
} finally {
  await page.close(); // ALWAYS close, even on error
}

2. `networkidle2` > `networkidle0`

networkidle0 waits for zero network connections, which never happens on sites with analytics, websockets, or polling. networkidle2 (max 2 connections for 500ms) is almost always what you want.

3. Viewport Size Matters More Than You Think

Default Puppeteer viewport is 800x600. Most websites look terrible at that size. Default to 1280x720 minimum. For "desktop" screenshots, 1440x900 produces the best results.

4. The Free Tier is Your Best Marketing

25 free screenshots/month is enough for developers to test thoroughly. The upgrade to $9/mo for 2,500 screenshots happens naturally when they integrate it into production.

Try It

Free tool: try.grabshot.dev - paste a URL, get a screenshot
API docs: grabshot.dev/docs
GitHub: SDKs for Node.js and Python

25 free screenshots/month, no credit card required.

What screenshot challenges have you faced? I'd love to hear about edge cases I should handle.

How I Built a Screenshot API with Device Frames and AI Cleanup

GrabShot — Wed, 18 Feb 2026 10:11:06 +0000

The Problem

I needed website screenshots for social cards, docs, and marketing. Puppeteer works but requires:

Server setup and maintenance
Handling timeouts, cookie banners, lazy loading
Device frame overlays (separate image processing pipeline)
Consistent quality across different sites

So I built GrabShot -- a hosted API that handles all of this in one call.

How It Works

curl "https://grabshot.dev/v1/screenshot?url=https://example.com&device=iphone15&aiCleanup=true&apiKey=gs_your_key"

Returns a device-framed, cleaned-up screenshot in ~3 seconds.

The Stack

Express for the API server
Puppeteer for headless Chrome rendering
Sharp for image processing and device frame compositing
Gemini 2.0 Flash for AI cleanup (identifying and removing popups)
SQLite for user data and rate limiting
Stripe for billing
Caddy for reverse proxy and auto-SSL

Key Technical Decisions

Device Frames

I pre-render device frame templates at multiple resolutions. When a screenshot is captured, Sharp composites the screenshot into the frame at the correct position and scale. This is much faster than doing it client-side.

AI Cleanup

The AI cleanup feature sends the page to Gemini with instructions to identify overlay elements (cookie banners, chat widgets, notification popups), then injects CSS to hide them before capturing. It adds ~1-2 seconds but the result is dramatically cleaner.

Rate Limiting

Each tier gets a monthly quota tracked in SQLite. Free tier gets 25/month. The limiter is per-API-key, not per-IP, which is simpler and more predictable.

Try It

Free tier: 25 screenshots/month, no credit card: grabshot.dev
API docs: grabshot.dev/docs
Interactive demo: grabshot.dev/try.html

Would love to hear what you'd use this for!