DEV Community: Dan E

Add Screenshot Capability to Windsurf via MCP

Dan E — Fri, 04 Sep 2026 18:48:53 +0000

Add Screenshot Capability to Windsurf via MCP

Windsurf's Cascade AI can read every file in your project and run terminal commands, but it cannot see a rendered web page. The Model Context Protocol (MCP) changes that: connect the Rendex MCP server and Cascade gains a tool it can call on its own to capture any URL and describe what it sees.

Prerequisites

Windsurf installed (any recent version with MCP support)
Node.js on your machine (for npx)
A Rendex API key. Get one free (100 renders/month, no credit card)

Step 1: Get a Rendex API key

Step 2: Open the MCP Servers panel

In Windsurf, click the gear icon in the status bar and select MCP Servers. This opens mcp_config.json, the file Cascade reads at startup.

Step 3: Add the Rendex server

{
  "mcpServers": {
    "rendex": {
      "command": "npx",
      "args": ["-y", "@copperline/rendex-mcp"],
      "env": {
        "RENDEX_API_KEY": "rdx_your_key_here"
      }
    }
  }
}

Replace rdx_your_key_here with your actual key and save the file.

Step 4: Restart Cascade

Click Restart Cascade in the MCP Servers panel, or close and reopen Windsurf.

Step 5: Verify the tool is available

In a Cascade chat, ask: What MCP tools do you have? Cascade should list rendex_screenshot.

Step 6: Capture a page

Screenshot https://rendex.dev and describe the hero section.

Capture https://example.com/checkout as a full-page PNG and check for layout issues.

Cascade calls rendex_screenshot, gets the rendered page back, and answers from what it sees:

Troubleshooting

rendex_screenshot does not appear. Run npx @copperline/rendex-mcp --version in a terminal to confirm Node.js is installed.

Authentication error. Check that RENDEX_API_KEY in mcp_config.json matches your dashboard key exactly, including the rdx_ prefix.

Cascade times out. Ask Cascade to add blockResourceTypes: ["media", "font"] or use waitUntil: "domcontentloaded" for faster captures.

Next steps

MCP documentation — hosted OAuth server config and full tool schema
Cursor MCP guide — same setup for Cursor (.cursor/mcp.json)
Free screenshot tool — test URLs before adding to Cascade

Get a free API key and start with 100 captures per month.

How to Convert URLs to PDF in Node.js

Dan E — Fri, 28 Aug 2026 00:45:07 +0000

How to Convert URLs to PDF in Node.js

Converting a URL to PDF in Node.js usually means spinning up Puppeteer, managing a Chrome process, and writing error-handling code for when the browser runs out of memory. The Rendex API handles the browser work: pass a URL, get a hosted PDF back.

Prerequisites

Node.js 18 or later (or Bun)
A Rendex API key. Get one free (100 renders/month, no credit card)

Step 1: Install the SDK

npm install @copperline/rendex

Step 2: Capture a URL as a PDF

import { Rendex } from "@copperline/rendex"
import { writeFileSync } from "fs"

const rendex = new Rendex(process.env.RENDEX_API_KEY!)

const result = await rendex.screenshot({
  url: "https://example.com/invoice/1001",
  format: "pdf",
  pdfFormat: "A4",
  pdfMargin: { top: "20mm", right: "15mm", bottom: "20mm", left: "15mm" },
  pdfPrintBackground: true,
})

// Hosted URL — share or store as-is
console.log(result.url)

// Raw bytes — write to disk or stream to a storage bucket
writeFileSync("invoice-1001.pdf", Buffer.from(result.base64, "base64"))

Step 3: Page size and margins

The pdfFormat option controls the paper size. Common values: "A4", "Letter", "Legal", "A3", "Tabloid". Margins accept any CSS length unit: px, mm, cm, or in.

Step 4: Background colors and images

Browsers strip CSS backgrounds when printing by default. Set pdfPrintBackground: true to keep brand colors and background images.

Step 5: Batch PDF generation

const batch = await rendex.batch({
  urls: invoiceUrls.map((url) => ({ url })),
  defaults: {
    format: "pdf",
    pdfFormat: "A4",
    pdfMargin: { top: "20mm", right: "15mm", bottom: "20mm", left: "15mm" },
    pdfPrintBackground: true,
  },
  webhookUrl: "https://yourapp.com/webhooks/rendex",
})
// batch.batchId — poll GET /v1/batches/:batchId for per-job status

Troubleshooting

Blank PDF. Set pdfPrintBackground: true if the page uses CSS backgrounds.

Missing images. The page must be publicly accessible. Inline private assets as base64 data URIs.

Content cut off. Remove fixed heights from the root element or use a taller pdfFormat like "A3".

Next steps

Free URL-to-PDF tool — test any URL before writing code
API reference — full parameter list including waitForSelector and cookies
Python PDF guide — same guide with the Python SDK

Get a free API key and start with 100 renders per month.

SPA Screenshot: waitFor Strategies for React, Vue, Svelte

Dan E — Fri, 21 Aug 2026 16:31:30 +0000

Capturing SPAs: waitFor Strategies for React, Vue, and Svelte

Single-page apps render content after the initial HTML loads. A screenshot taken too early captures a loading spinner or an empty container. The fix is telling the browser to wait for the right signal before the shutter fires.

How wait strategies work

Two parameters control the wait:

waitUntil — a network or lifecycle event: "load", "domcontentloaded", "networkidle0", or "networkidle2" (default)
waitForSelector — a CSS selector that appears when the content you care about is ready

React

Add a marker element that renders after the app mounts:

// App.tsx
import { useEffect, useState } from "react"

export default function App() {
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  return (
    <>
      {mounted && <div id="app-loaded" style={{ display: "none" }} />}
      {/* rest of your app */}
    </>
  )
}

// capture.ts
import { Rendex } from "@copperline/rendex"

const rendex = new Rendex(process.env.RENDEX_API_KEY!)

const result = await rendex.screenshot({
  url: "https://myapp.example.com",
  waitForSelector: "#app-loaded",
  waitUntil: "domcontentloaded",
  fullPage: true,
})

Vue 3

<!-- App.vue -->
<script setup>
import { ref, onMounted } from "vue"
const isReady = ref(false)
onMounted(() => { isReady.value = true })
</script>

<template>
  <div v-if="isReady" id="vue-ready" style="display:none" />
</template>

const result = await rendex.screenshot({
  url: "https://vueapp.example.com",
  waitForSelector: "#vue-ready",
  waitUntil: "domcontentloaded",
  fullPage: true,
})

Svelte

For most Svelte apps, networkidle0 is sufficient:

const result = await rendex.screenshot({
  url: "https://svelteapp.example.com",
  waitUntil: "networkidle0",
  fullPage: true,
})

Troubleshooting

Selector never appears and capture times out. Validate in DevTools with document.querySelector('#your-selector'). If it returns null, the element does not exist.

Partial render even with selector. The selector appeared but assets had not loaded. Add a delay in milliseconds or wait for a more specific element.

networkidle0 times out. The page has long-polling or WebSocket connections. Switch to "networkidle2" or use waitForSelector instead.

Next steps

Python screenshot guide — same wait params with the Python SDK
API reference — full parameter list
Free screenshot tool — test selectors against a live URL

Get a free API key and start with 100 captures per month.

How to Make Screenshot APIs Fast: 5 Optimizations

Dan E — Fri, 14 Aug 2026 16:50:12 +0000

How to Make Screenshot APIs Fast: 5 Optimizations

Most screenshot API calls take longer than they need to. The bottleneck is rarely the API itself. It is the choices you make when calling it: the output format, the viewport size, which resources the browser loads, and whether you send one request or fifty. Five adjustments cover the majority of avoidable overhead.

1. Use a compressed output format

PNG is lossless and therefore the largest output format by default. For thumbnails, preview cards, and social images where exact pixel accuracy is not required, WebP or JPEG cut file size by 50 to 80 percent with no perceptible quality loss at typical display sizes.

import { Rendex } from "@copperline/rendex"
import { writeFileSync } from "fs"

const rendex = new Rendex(process.env.RENDEX_API_KEY!)

// WebP — ~38 KB vs 210 KB for PNG
const webp = await rendex.screenshot({
  url: "https://example.com",
  format: "webp",
  quality: 82,
})

writeFileSync("capture.webp", webp.image)

2. Right-size the viewport

The default viewport is 1280×800 at 2× device pixel ratio. For thumbnail generation, set width to your target size instead.

const thumb = await rendex.screenshot({
  url: "https://example.com",
  format: "webp",
  width: 400,
  height: 300,
  deviceScaleFactor: 1,
})

3. Block resources you do not need

Third-party analytics scripts, font files, and video embeds add load time. Use blockResourceTypes to skip them.

const result = await rendex.screenshot({
  url: "https://dashboard.example.com",
  format: "webp",
  blockResourceTypes: ["font", "media", "other"],
})

4. Choose the right wait strategy

waitUntil: "load" fires faster than the default "networkidle2" for server-rendered pages. Use waitForSelector for client-side apps.

// Fast server-rendered page
const result = await rendex.screenshot({
  url: "https://internal-dashboard.example.com",
  waitUntil: "load",
})

// SPA with async content
const spa = await rendex.screenshot({
  url: "https://app.example.com/dashboard",
  waitForSelector: "#main-content",
  waitUntil: "domcontentloaded",
})

5. Submit multiple captures in one batch call

The batch endpoint accepts 5 to 500 URLs per call and processes them concurrently.

const batchResult = await rendex.batch({
  urls: productUrls,
  defaults: {
    format: "webp",
    quality: 82,
    width: 640,
    waitUntil: "load",
    blockResourceTypes: ["font", "media"],
  },
  webhookUrl: "https://yourapp.com/webhooks/screenshots",
})

console.log(batchResult.data.batchId)

Troubleshooting

Page looks broken after blocking resources. Start with only "font" and "media". Pages that use web fonts for icons will break when fonts are blocked — inject a fallback with css: "* { font-family: sans-serif !important; }".

waitUntil: "load" returns a blank page. The page renders content after the load event. Use waitForSelector with a CSS selector that appears when content is ready.

Batch results have some failed jobs. Poll /v1/jobs/:jobId for each job. Failed jobs return an error code and message.

Next steps

Free screenshot tool — test format and viewport settings without code
SPA screenshot waitFor guide — framework-specific selector patterns
API reference — full batch schema and plan-based limits

Get a free API key (100 calls/month, no credit card) or see pricing for higher-volume plans.

Bulk Screenshot and PDF Generation with a Batch API

Dan E — Fri, 24 Jul 2026 17:29:30 +0000

Bulk Screenshot and PDF Generation with a Batch API

Firing 200 separate screenshot requests one at a time works fine in a script. It falls apart in production: rate limits kick in, error handling gets messy, and you have no way to track overall progress. The batch screenshot API solves this with a single request: submit up to 500 URLs, get a batch ID back, then poll or receive a webhook when all jobs finish.

This guide covers submitting a batch, polling for results, fanning out with a webhook, and knowing when batch beats firing N single requests.

When to Use Batch vs. Single Requests

Single requests are fine for on-demand captures (a user clicks "screenshot", you capture, you display). Batch is the right choice when:

You have a fixed list of URLs to capture in one job (site audit, competitor scan, monitoring baseline).
You want a single webhook callback when all jobs are done rather than N separate callbacks.
You need a shared progress indicator (34 of 48 complete) without building your own state machine.

Batch is URL-only. If you need to render raw HTML payloads, fire those as async single requests with async: true using the REST API.

Plan Limits

Batch size caps are per request, not per day. You can fire multiple batches.

Plan	Max URLs per batch
Free	5
Starter	25
Pro	100
Enterprise	500

Credits are charged for the whole batch up front at submission time. If the batch fails before any jobs run, the charge is refunded automatically.

Step 1: Submit a Batch

The batch screenshot API accepts a urls array and a shared defaults object for capture settings. Settings in defaults apply to every URL in the batch. Source-type fields (url, html, markdown) are not allowed in defaults and return a 400 if present.

curl -X POST https://api.rendex.dev/v1/screenshot/batch \
  -H "Authorization: Bearer rdx_YOUR_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "urls": [
      "https://example.com",
      "https://example.com/pricing",
      "https://example.com/about"
    ],
    "defaults": {
      "format": "png",
      "fullPage": true,
      "width": 1280
    }
  }'

# 202 Accepted — response includes batchId and per-job IDs:
# {
#   "batchId": "a3f9c2e1-...",
#   "totalJobs": 3,
#   "jobs": [
#     { "jobId": "job_01jyav...", "url": "https://example.com", "status": "queued" },
#     ...
#   ]
# }

The JS SDK wraps this in rendex.batch():

import Rendex from "@copperline/rendex"

// npm install @copperline/rendex
const rendex = new Rendex("rdx_YOUR_KEY") // get one at rendex.dev/login

const result = await rendex.batch({
  urls: [
    "https://example.com",
    "https://example.com/pricing",
    "https://example.com/about",
  ],
  defaults: {
    format: "png",
    fullPage: true,
    width: 1280,
  },
})

console.log(result.data.batchId)    // "a3f9c2e1-..."
console.log(result.data.totalJobs)  // 3

The Python SDK uses rendex.batch() with snake_case parameter names:

from rendex import Rendex

# pip install rendex
rendex = Rendex("rdx_YOUR_KEY")  # get one at rendex.dev/login

result = rendex.batch(
    urls=[
        "https://example.com",
        "https://example.com/pricing",
        "https://example.com/about",
    ],
    defaults={
        "format": "png",
        "fullPage": True,
        "width": 1280,
    },
)

batch_id = result["data"]["batchId"]
print(f"Submitted {result['data']['totalJobs']} jobs, batch {batch_id}")

Step 2: Poll for Results

The batch runs asynchronously on Cloudflare Queues. Poll GET /v1/batches/:batchId to check progress. Each job in the response includes a resultUrl (signed R2 link, valid for 24 hours by default) once its status is completed.

import Rendex from "@copperline/rendex"

const rendex = new Rendex("rdx_YOUR_KEY")

async function waitForBatch(batchId: string, intervalMs = 2000): Promise<void> {
  while (true) {
    const status = await rendex.batchStatus(batchId)
    const { batch } = status.data

    console.log(
      `${batch.completedJobs}/${batch.totalJobs} done` +
      ` (failed: ${batch.failedJobs})`
    )

    if (batch.status === "completed" || batch.status === "partial") {
      for (const job of batch.jobs) {
        if (job.status === "completed" && job.resultUrl) {
          console.log(job.resultUrl) // signed PNG URL
        }
      }
      break
    }

    await new Promise((r) => setTimeout(r, intervalMs))
  }
}

waitForBatch("a3f9c2e1-...")

The batch status field is one of: processing, completed, partial (some jobs failed), or failed.

Step 3: Receive a Webhook When Done

Polling works for scripts. For production services, pass webhookUrl on the batch request. Rendex calls it once when all jobs in the batch have settled, with the same payload shape as the poll response. The request is HMAC-signed so you can verify the source.

curl -X POST https://api.rendex.dev/v1/screenshot/batch \
  -H "Authorization: Bearer rdx_YOUR_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "urls": ["https://example.com", "https://example.com/pricing"],
    "defaults": { "format": "png", "fullPage": true },
    "webhookUrl": "https://your-app.example.com/hooks/rendex-batch"
  }'

// Example: Next.js App Router handler
import { NextRequest, NextResponse } from "next/server"
import { verifyWebhookSignature } from "@copperline/rendex/webhooks"

export async function POST(req: NextRequest) {
  const body = await req.text()
  const sig = req.headers.get("rendex-signature") ?? ""

  const valid = verifyWebhookSignature({
    body,
    signature: sig,
    secret: process.env.RENDEX_WEBHOOK_SECRET!,
  })

  if (!valid) return NextResponse.json({ error: "bad signature" }, { status: 401 })

  const payload = JSON.parse(body)
  const { batchId, status, jobs } = payload.data

  const resultUrls = jobs
    .filter((j) => j.status === "completed")
    .map((j) => j.resultUrl)

  console.log(`Batch ${batchId} settled (${status}): ${resultUrls.length} screenshots ready`)

  return NextResponse.json({ received: true })
}

Controlling How Long Result URLs Last

By default, signed result URLs expire after 24 hours. Use the cacheTtl field (in seconds) to extend or shorten this. The minimum is 3,600 seconds (1 hour) and the maximum is 2,592,000 seconds (30 days).

{
  "urls": ["https://example.com"],
  "defaults": { "format": "png" },
  "cacheTtl": 604800
}

Troubleshooting

BATCH_LIMIT_EXCEEDED (400): Your batch exceeds the per-plan URL cap. Either split into smaller batches or upgrade. The error response includes the cap for your current plan and the next tier.

Some jobs show status "failed": Individual jobs can fail without failing the whole batch. Check the error field on each job entry. Common causes: the URL returned a non-200 status, the page timed out, or a wait selector was not found.

Webhook not received: Rendex validates the webhook URL against a block list (private IPs, loopback). The URL must be publicly reachable. For local development, use a tunnel like cloudflared tunnel or ngrok and poll instead.

PLAN_UPGRADE_REQUIRED on a batch with geo: The geo parameter in defaults requires a Pro or Enterprise plan. Free and Starter batches cannot use geo-targeting.

Next Steps

Batch capture works well alongside scheduled monitoring. The website monitoring with automated screenshots guide shows a Cloudflare Workers cron that fires a batch of key pages hourly and alerts on visual changes.

For the full request schema and all defaults options, see the API reference.

Ready to run your first batch? The free screenshot tool lets you try a single capture without code. Get an API key (100 free calls/month, no credit card) to start submitting batches.

HTML Table to PNG in Python Without wkhtmltoimage

Dan E — Thu, 23 Jul 2026 17:21:26 +0000

You have an HTML table (a financial summary, a styled DataFrame, a report section your frontend already renders) and you need it as a PNG from a Python backend. For a decade the reflex answer was wkhtmltoimage (via imgkit) or a full Selenium driver. Both still technically run in 2026, and both are the wrong place to start a new project: the wkhtmltoimage engine was archived in January 2023, and Selenium drags a whole browser fleet behind one PNG.

This is the opinionated, decision-first version. You have a table, you want a PNG (and probably a PDF), and you do not want a frozen WebKit binary or a Chromedriver version-match problem in your deploy. There are exactly two paths worth your time: call a rendering API, or self-host Playwright. For the full six-way survey with every library benchmarked, see Render an HTML Table to PNG in Python (5 Ways). This post picks the winners and skips the legacy detours.

Path 1: a rendering API (nothing to host)

POST the HTML, get PNG bytes back. A real, current Chromium runs on Cloudflare's edge through Rendex, so modern CSS (Flexbox, Grid, web fonts) renders exactly as it does in Chrome, and there is no browser to install, patch, or keep alive in your image. The rendex Python SDK wraps the call in two lines.

# pip install rendex   (key from rendex.dev/login)
import os
from pathlib import Path
from rendex import Rendex

rendex = Rendex(os.environ["RENDEX_API_KEY"])

table_html = """
<table style="border-collapse:collapse;font-family:system-ui;font-size:14px">
  <thead>
    <tr style="background:#f1f5f9">
      <th style="text-align:left;padding:8px 14px">Line item</th>
      <th style="text-align:right;padding:8px 14px">Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr><td style="padding:8px 14px">Subscriptions</td>
        <td style="text-align:right;padding:8px 14px">€482,100</td></tr>
    <tr><td style="padding:8px 14px">Professional services</td>
        <td style="text-align:right;padding:8px 14px">€91,400</td></tr>
  </tbody>
</table>
"""

result = rendex.render_html(table_html, format="png", device_scale_factor=2)
Path("table.png").write_bytes(result.image)
print("Rendered", result.metadata)

Because the table is the only thing on the page, render at device_scale_factor=2 for a crisp 2x PNG, and add full_page=True when a long report runs past the viewport. The SDK posts to /v1/screenshot under the hood and hands you the image bytes; if you would rather skip the dependency, the same render over raw HTTP returns those bytes straight to a file:

curl -X POST https://api.rendex.dev/v1/screenshot \
  -H "Authorization: Bearer $RENDEX_API_KEY" \
  -H "Content-Type: application/json" \
  --output table.png \
  -d '{
    "html": "<table style=\"border-collapse:collapse;font-family:system-ui\"><tr><th>Line item</th><th>Amount</th></tr><tr><td>Subscriptions</td><td>€482,100</td></tr></table>",
    "format": "png",
    "deviceScaleFactor": 2,
    "fullPage": true
  }'

That is the whole pipeline. It deploys to a serverless function or a slim container with no Chromium binary in the image, which is the part that usually breaks at 2am. The free tier is 100 renders/month, no card, so you can prove the report flow before you pay for anything. The browser-based test of the same request lives in the HTML-to-image playground.

Same call, now a PDF

Most report pipelines need the table as a PNG for a dashboard and as a PDF for an emailed deliverable. It is the same request with one field changed, so you do not bolt on a second library or a PDF-to-PNG conversion step.

# Same html, format="pdf" → PDF bytes back
from pathlib import Path
from rendex import Rendex
import os

rendex = Rendex(os.environ["RENDEX_API_KEY"])

pdf = rendex.render_html(table_html, format="pdf").image
Path("table.pdf").write_bytes(pdf)

Rendex renders to PNG, JPEG, WebP, or PDF from the same endpoint. For the REST field reference (every option, every output format), see the API reference; the three-minute setup is in the quickstart.

Path 2: self-host Playwright

If the HTML cannot leave your network, or you already run a browser for other jobs, Playwright is the modern self-hosted answer. It ships evergreen bundled browsers, so there is no Chromedriver to version-match. set_content() loads the HTML, then you screenshot the table element directly.

# pip install playwright  &&  playwright install chromium
from playwright.sync_api import sync_playwright

table_html = "<table border=1><tr><th>Line item</th><th>Amount</th></tr>" \
             "<tr><td>Subscriptions</td><td>€482,100</td></tr></table>"

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page(device_scale_factor=2)
    page.set_content(table_html)
    page.locator("table").screenshot(path="table.png")  # crop to the table
    browser.close()

It works and you keep every byte local. The cost is ownership: the bundled browsers add hundreds of MB to your image, you patch them on Playwright's cadence, and a long-running process leaks memory and leaves zombie processes if you forget to close contexts. That is a fair trade when data residency is the constraint, and a poor one when rendering a table is a side-task to your actual report logic.

What to skip, and why

The legacy options are not broken so much as retired. Reach for them only to keep an existing script breathing.

wkhtmltoimage / imgkit: the engine was archived in January 2023 (last stable release June 2020). It is a frozen old WebKit, so modern CSS Flex/Grid, web fonts, and emoji are broken or silently dropped, and a headless box throws QXcbConnection: Could not connect to display unless you wrap every call in xvfb-run. Fine for a legacy report; not a 2026 starting point.
Selenium: maintained and battle-tested, but it is the most boilerplate for one PNG, full-page capture is not first-class, and you still own the browser fleet, same as Playwright with more ceremony.
WeasyPrint: an excellent pure-Python engine, but it renders to PDF only (PNG export was removed in v53) and runs no JavaScript. Great for static HTML-to-PDF, useless when you need a PNG or your table is built by JS.

The honest, side-by-side trade-offs for all five live in the 5-ways comparison, and the hosted contenders are scored in best HTML-to-image APIs 2026.

The decision in one line

If you can send the HTML out, call the API: no browser to host, PNG or PDF from one request, and your deploy stays a plain Python service. If the HTML must stay in-network, self-host Playwright and accept that you now operate a browser. Either way, the answer to "HTML table to PNG in Python" in 2026 is not wkhtmltoimage.

The fastest way to see the API path is to render your own table: paste it into the playground, then grab a free key and move the same call into your report job. 100 renders a month, no card, enough to ship the pipeline before you scale it.

Async Screenshot API With Webhook Delivery

Dan E — Thu, 23 Jul 2026 17:20:55 +0000

A synchronous screenshot call holds the connection open until the page finishes rendering. That is fine for a fast landing page. It gets painful when you capture a heavy dashboard, a slow single-page app, or a full scrollable page: the request can run for tens of seconds, your worker sits blocked, and a proxy timeout can drop the response before the image is ready.

The async screenshot API removes that wait. You submit the capture, get a job ID back immediately, and Rendex does the work in the background. When the job settles, it POSTs an HMAC-signed webhook to a URL you control. No open connection, no polling loop, no timeout risk. This guide covers the submit call, the signed payload, how to verify it in Node and Python, and how retries and idempotency work.

When to reach for async

Reach for async and webhooks when a capture is slow or when you are firing a lot of them at once:

Full-page captures of long or image-heavy pages.
Single-page apps that need a few seconds to hydrate before they look right.
Background jobs where nothing is waiting on the response in real time.
High volume, so you never want a request holding a socket open.

For a handful of quick captures, the synchronous screenshot endpoint is simpler. For rendering many URLs in one shot, see the batch rendering API, which also delivers a webhook when the whole batch is done.

Step 1: Submit a non-blocking capture

Send the same body you would to a normal capture, plus async: true and a webhookUrl. The response comes back right away with a jobId and an HTTP 202, so your code moves on instead of waiting.

curl -X POST https://api.rendex.dev/v1/screenshot \
  -H "Authorization: Bearer $RENDEX_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://news.ycombinator.com",
    "fullPage": true,
    "async": true,
    "webhookUrl": "https://api.your-app.com/hooks/rendex"
  }'

{
  "success": true,
  "data": {
    "jobId": "a1f9c2e4-8b3d-4c7a-9f10-2b6e5c1d4a70",
    "status": "queued"
  },
  "meta": { "requestId": "req_...", "timestamp": "2026-07-20T18:24:01.004Z" }
}

Like every Rendex JSON endpoint, the response is wrapped in { success, data, meta }, so the job ID is at data.jobId (the webhook payload below is the one exception: it is POSTed as a raw, unwrapped object). The submit charges one render credit up front. The webhook URL is checked before the job is queued, so a private or unreachable address is rejected at submit time rather than failing silently later. Each plan caps how many jobs can be in flight at once (queued or processing): 3 on Free, 50 on Starter, 200 on Pro. Go over and the submit returns a QUEUE_LIMIT_REACHED response so you can back off.

Step 2: The signed callback

When the capture finishes, Rendex sends a POST to your webhookUrl. A completed job carries the event name, the job ID, and a signed URL to the rendered image. A failed job carries a safe error message instead of a result.

{
  "event": "job.completed",
  "jobId": "a1f9c2e4-8b3d-4c7a-9f10-2b6e5c1d4a70",
  "status": "completed",
  "resultUrl": "https://api.rendex.dev/v1/images/a1f9c2e4...",
  "completedAt": "2026-07-20T18:24:07.512Z"
}

Every delivery carries four headers you will use to verify and de-duplicate it:

x-rendex-event: the event name, such as job.completed or job.failed.
x-rendex-signature: the HMAC-SHA256 signature of the payload, hex encoded.
x-rendex-timestamp: the Unix time in seconds when the signature was made.
x-rendex-delivery-id: a stable ID that is the same across every retry of one delivery.

Step 3: Verify the signature

Anyone who learns your webhook URL could POST to it, so treat an unsigned request as untrusted. The signature is an HMAC-SHA256 over the string timestamp + "." + rawBody, keyed with your webhook secret. This is the same scheme Stripe uses, so the pattern will look familiar. Compute the expected signature over the raw request body and compare it in constant time.

import crypto from "node:crypto";

function verifyWebhook(rawBody, signature, timestamp, secret) {
  const message = `${timestamp}.${rawBody}`;
  const expected = crypto
    .createHmac("sha256", secret)
    .update(message)
    .digest("hex");
  if (signature.length !== expected.length) return false;
  return crypto.timingSafeEqual(
    Buffer.from(signature),
    Buffer.from(expected)
  );
}

// Express: use the RAW body, not the parsed JSON object.
app.post("/hooks/rendex", express.raw({ type: "*/*" }), (req, res) => {
  const raw = req.body.toString("utf8");
  const ok = verifyWebhook(
    raw,
    req.headers["x-rendex-signature"],
    req.headers["x-rendex-timestamp"],
    process.env.WEBHOOK_SECRET
  );
  if (!ok) return res.status(401).json({ error: "Invalid signature" });

  const payload = JSON.parse(raw);
  res.status(200).json({ received: true });
});

Same check in Python with Flask:

import hmac, hashlib, os

def verify_webhook(raw_body: str, signature: str, timestamp: str, secret: str) -> bool:
    message = f"{timestamp}.{raw_body}"
    expected = hmac.new(
        secret.encode(), message.encode(), hashlib.sha256
    ).hexdigest()
    return hmac.compare_digest(signature, expected)

@app.post("/hooks/rendex")
def rendex_hook():
    raw = request.get_data(as_text=True)
    ok = verify_webhook(
        raw,
        request.headers.get("x-rendex-signature", ""),
        request.headers.get("x-rendex-timestamp", ""),
        os.environ["WEBHOOK_SECRET"],
    )
    if not ok:
        return {"error": "Invalid signature"}, 401
    return {"received": True}, 200

Two things to get right. Verify against the exact bytes you received: if your framework parses JSON and re-serializes it, the whitespace changes and the signature will not match, so read the raw body. And use a constant-time compare (timingSafeEqual or hmac.compare_digest) instead of === so you do not leak timing information. The full reference lives in the webhooks docs.

Step 4: Polling as a fallback

Webhooks are the right default, but you cannot always run a public endpoint, for example during local development or inside a locked-down network. In that case, skip the webhookUrl and poll the job by ID instead.

curl https://api.rendex.dev/v1/jobs/a1f9c2e4-8b3d-4c7a-9f10-2b6e5c1d4a70 \
  -H "Authorization: Bearer $RENDEX_API_KEY"

# While running:  { "success": true, "data": { "status": "processing" } }
# When done:      { "success": true, "data": { "status": "completed", "resultUrl": "https://api.rendex.dev/v1/images/..." } }

Poll on a gentle interval (a few seconds) and stop once status is completed or failed. When you can receive a callback, prefer the webhook: it fires the moment the job settles instead of on your next poll, and it costs you no extra requests. Full field details are in the API reference.

Retries and idempotency

If your endpoint does not answer with a 2xx, Rendex retries the delivery with exponential backoff, up to four attempts total, then gives up. A 4xx response is treated as a permanent rejection and is not retried, so a bug in your handler will not trigger a retry storm. Redirects are not followed: your webhook route should accept the POST directly.

Because a slow acknowledgement can cause a retry after the work is already done, deliveries can arrive more than once. Use the x-rendex-delivery-id header, which stays the same across retries of the same delivery, as an idempotency key: record the IDs you have processed and ignore repeats. Answer with a 2xx as soon as you have stored the event, then do slow work afterward, so a heavy handler never looks like a failure.

Troubleshooting

No webhook arrives. The URL must be public and resolve to a routable address. Private and internal hosts are blocked at submit time and return INVALID_WEBHOOK_URL. During local work, use a tunnel that gives you a public URL, or poll instead.
Signature never matches. You are almost certainly hashing a re-serialized body. Sign the raw bytes, and confirm the message is timestamp + "." + body in that order.
Deliveries stopped after one failure. Your endpoint returned a 4xx, which is treated as permanent. Return a 5xx if you want the retry, or fix the handler and re-submit.
QUEUE_LIMIT_REACHED on submit. You have hit your plan's concurrent-job cap. Wait for jobs to finish or move to a higher tier for more in-flight jobs.

Ship it

Async plus webhooks turns screenshots into a background job your app never waits on: submit, get a job ID, and handle a signed callback when the image is ready. Grab an API key and run your first async capture from the screenshot tool, or read the webhooks docs for the full payload and event list. New accounts include a free monthly render allowance, so you can wire up the whole flow before you pay anything. Create an account to get your key.

Add a Cursor MCP Screenshot Tool in Minutes

Dan E — Wed, 15 Jul 2026 17:15:38 +0000

Cursor's AI can read every file in your project, but it cannot see a live web page. Ask it about a layout bug or an OG image and it is working blind. The Model Context Protocol (MCP) fixes that: wire in a screenshot server and Cursor gains a tool it can call on its own to capture any URL and reason about the result.

This guide sets up a Cursor MCP screenshot tool with Rendex in about five minutes. You get one tool, rendex_screenshot, that turns a URL, raw HTML, or Markdown into a PNG, JPEG, WebP, or PDF, with options like full-page capture and dark mode.

Prerequisites

You need three things before you start:

Cursor installed (any recent version with MCP support).
Node.js on your machine, so Cursor can run the server with npx.
A Rendex API key. The free tier gives you 100 renders a month with no credit card, which is plenty for editor use.

Step 1: Get a Rendex API key

Sign in at rendex.dev/login, open the dashboard, and copy your key. It looks like rdx_ followed by a short string. Keep it out of version control. If you want the exact key format and rate limits, the quickstart covers them.

Step 2: Add Rendex to .cursor/mcp.json

Cursor reads MCP servers from .cursor/mcp.json in your project root, or from Settings then MCP for a global setup. Create the file and add the Rendex server. The npx command downloads and runs the published package, so there is nothing to install by hand.

{
  "mcpServers": {
    "rendex": {
      "command": "npx",
      "args": ["-y", "@copperline/rendex-mcp"],
      "env": {
        "RENDEX_API_KEY": "rdx_your_key_here"
      }
    }
  }
}

Add .cursor/mcp.json to your .gitignore. It holds your key, so it should never land in a commit.

Step 3: Or connect the hosted server (no install)

If you would rather skip the local process, point Cursor at the hosted server instead. It is fronted by OAuth 2.1, so you sign in with a one-time email code and never paste a key into a config file. Each caller bills against their own plan and credit pool.

{
  "mcpServers": {
    "rendex": {
      "url": "https://mcp.rendex.dev/mcp"
    }
  }
}

Clients that prefer a static key can still pass one in an Authorization header. The MCP docs show both the OAuth flow and the header form.

Step 4: Restart Cursor and confirm the tool

Fully quit and reopen Cursor so it reloads the config. Open the MCP settings and check that the rendex server shows a green status with rendex_screenshot listed under it. If the server is red, the JSON is almost always the cause. See troubleshooting below.

Step 5: Ask Cursor to capture a page

Now you can prompt Cursor in plain language and it will call the tool on its own. Try something like:

Screenshot https://rendex.dev/pricing in dark mode,
full page, and tell me if the plan prices are readable.

Cursor calls rendex_screenshot with the arguments it parsed from your request, gets the image back, and reasons about it. The tool accepts the same options the API does, so you can be specific:

{
  "url": "https://rendex.dev/pricing",
  "format": "png",
  "fullPage": true,
  "darkMode": true,
  "device": "iphone_15"
}

Useful parameters to know: format switches between png, jpeg, webp, and pdf; fullPage captures the whole scroll height; selector crops to a single element like a pricing card; and blockAds removes ad and cookie clutter before the shot.

Troubleshooting

The server shows red or the tool never appears. Validate the JSON. A trailing comma or a missing brace stops Cursor from parsing the file. Paste it into a JSON linter, fix the error, then restart Cursor.

Every call returns an auth error. The key is wrong or missing. Confirm RENDEX_API_KEY is set in the env block and that you copied the full rdx_ key from the dashboard.

npx cannot find the package. Check that Node.js is on your PATH and run npx -y @copperline/rendex-mcp once in a terminal to prime the download, then reopen Cursor.

You want the same setup in another editor. The config is nearly identical for Claude Desktop, Claude Code, and Windsurf. The MCP rendering guide walks through each client and the full tool set.

Where to go next

That is the whole setup. Cursor can now capture live pages while it works, which is handy for reviewing a deploy, checking an OG image, or grabbing a reference shot without leaving the editor. To try the same engine outside Cursor first, the browser-based screenshot tool runs a capture with no code.

When you are ready to wire it into Cursor, grab a free API key and drop it into your config. One hundred renders a month is enough to keep the tool on hand all day.

Render HTML and Screenshots in Zapier (No-Code)

Dan E — Fri, 26 Jun 2026 17:46:18 +0000

Render HTML and Screenshots in Zapier (No-Code)

Zapier connects your apps, but getting a rendered image or PDF out of a Zap usually means wiring up an HTTP module and manually constructing JSON bodies. The native Rendex app for Zapier removes that step: five actions in the app directory, no HTTP modules, no auth headers to copy by hand.

This guide covers the three most common workflows: capturing a URL as a PNG, rendering an HTML template with dynamic data using Template Values, and generating a PDF. All three work from the Zapier editor with point-and-click field mapping.

Prerequisites

A Zapier account on any plan. The free plan supports single-step and two-step Zaps; Starter or higher unlocks multi-step workflows.
A Rendex API key. The free tier covers 500 captures per month. Get one at rendex.dev/login.

Step 1: Find Rendex and Connect Your Account

Open Zapier and start a new Zap. When adding an action step, search for Rendex in the app directory. Zapier will prompt you to authenticate: paste your API key and click Yes, Continue. Zapier validates the key against api.rendex.dev and stores it encrypted. It never appears in Zap run logs.

Full setup steps are in the Zapier integration docs.

The Rendex app exposes five actions and one trigger:

Capture Screenshot — URL, HTML, or Markdown to PNG/JPEG/WebP/PDF (synchronous, returns the file inline)
Generate PDF — same sources, always PDF output, with page-size, margin, and orientation controls
Extract Text — pull clean content from a URL for LLM pipelines or content archives
Capture Screenshot (Background) — async, returns a Job ID; pair with Get Job Status for heavy pages
Submit Batch — 5 to 500 URLs at once depending on your Rendex plan
New Completed Screenshot (trigger) — fires when a background job finishes

Step 2: Capture a Zapier Screenshot from a URL

Capture Screenshot is the right action for most Zaps. It runs synchronously: the step submits the render, waits for the result, and returns the image file inline. The next Zap step can attach it to an email, upload it to Google Drive, or post it to Slack.

Set Source Type to URL, then map the URL field from your trigger: an Airtable URL column, a Google Sheets cell, or a field from an incoming webhook. Set Output Format to png and toggle Full Page if you need the entire scrollable page, not just the above-the-fold viewport.

The action returns a file output. Map it into any binary-capable Zap step: Google Drive Upload File, Dropbox, OneDrive, or an email attachment.

A common Zapier screenshot recipe: Airtable New Record (with a URL field) to Rendex Capture Screenshot to Airtable Update Record to write the screenshot URL back to the same row.

For pages that load content client-side via JavaScript, set Wait For Selector to a CSS selector that appears only after the page finishes rendering. Without this, the capture may fire before the content paints.

Step 3: Render an HTML Template with Dynamic Data

When Source Type is set to HTML, a second field appears: Template Values. This is the feature that separates Rendex from a plain screenshot API.

Template Values is a key-value dict. Any key you add replaces the matching {{placeholder}} in your HTML at render time. Write one HTML template with placeholders, fill in the values from your Zap trigger, and every run produces a different rendered output from the same template. No code step, no external template engine.

The invoice above uses a single HTML template with {{client}}, {{invoice_no}}, and {{total}} placeholders. Each Zap run fills them from a Google Sheets row. Markdown is supported the same way: set Source Type to Markdown and Rendex styles the output automatically.

To verify the template before building the Zap, use the free HTML-to-image tool. You can also test the equivalent API call directly:

curl -X POST https://api.rendex.dev/v1/screenshot \
  -H "Authorization: Bearer rdx_live_YOUR_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "html": "<div style=\"font-family:system-ui;padding:48px\"><h1 style=\"color:#ea580c\">Invoice #{{invoice_no}}</h1><p>Billed to: {{client}}</p><p><strong>Total due: {{total}}</strong></p></div>",
    "data": {
      "invoice_no": "INV-2026-0431",
      "client": "Northwick Ventures",
      "total": "$3,045.00"
    },
    "format": "png",
    "width": 900,
    "height": 400
  }' --output invoice.png
# Get your API key at https://rendex.dev/login

The data field in the API body maps directly to Template Values in the Zapier editor.

Step 4: Generate a PDF

Use Generate PDF when you need a paginated document rather than an image. It accepts the same source types (URL, HTML, Markdown) and the same Template Values dict. PDF-specific fields appear in the action editor:

PDF Page Size: A4 (default), Letter, Legal, Tabloid
PDF Landscape: toggle for wide content like dashboards or spreadsheets
PDF Print Background: on by default, preserves CSS background colors and images
PDF Margins: JSON object with top, right, bottom, left in CSS units

Common recipe: Stripe New Invoice to Rendex Generate PDF (map the hosted invoice URL) to Google Drive Upload File to Gmail Send Email with the Drive link.

For slow-loading pages, switch to Capture Screenshot (Background) to avoid Zapier's 30-second step timeout. The action returns a Job ID; add a Get Job Status search step to retrieve the finished PDF.

Troubleshooting

API key not validating: Confirm the key starts with rdx_. Paste it directly from your Rendex dashboard to avoid trailing spaces. If you rotated the key, go to Zapier's Connected Accounts and reconnect Rendex with the new key.

Screenshot is blank or shows a loading spinner: The page renders content after initial HTML load via JavaScript. Set Wait For Selector to a CSS selector that only exists after the page finishes hydrating, for example #main-content or .loaded.

Zap timed out: Zapier caps synchronous action steps at 30 seconds. Switch to Capture Screenshot (Background) for pages that take longer. Pair it with a Get Job Status step to retrieve the result, or paste a Zapier Catch Hook URL into the Webhook URL field to trigger a follow-up Zap when the render finishes.

403 PLAN_UPGRADE_REQUIRED: Some fields (Cookies, Custom Headers, Geo Country) require a paid Rendex plan. Each field's tooltip notes the plan requirement. Upgrade at the pricing page.

Next Steps

The Zapier integration docs list every action, trigger, search, and field with plan requirements in a single reference table.

For the equivalent workflow in Make.com, the same HTML-to-image pattern via Make's HTTP module is covered in the Make HTML-to-image guide.

Ready to start? Get a free API key (500 renders/month, no credit card) and search for Rendex in the Zapier app directory. The free HTML-to-image tool is useful for testing your template before you build the Zap.

Rendex Watch: Visual Website-Change Monitoring

Dan E — Sun, 21 Jun 2026 17:26:22 +0000

Rendex Watch: Visual Website-Change Monitoring, Built Into Your Rendering API

Rendex Watch is live. It monitors any URL on a schedule and shows you a real-Chrome before and after visual diff with a highlighted overlay, so you see exactly which part of the page changed, not just that something did. It runs inside the same platform as the rest of Rendex: one rdx_ key, one shared credit pool, one bill, alongside screenshots, PDF, and content extraction.

Most uptime checks tell you the server returned a 200. They stay green while a deploy blanks a section, a price flips, a cookie banner covers the page, or a third-party script wipes the layout. Watch captures the rendered page on a schedule, compares each check against a stored baseline, and alerts you by email or webhook when the page actually changes.

What shipped

Point a watch at a URL and pick how it should detect change: a visual diff (a real Chrome render, compared pixel by pixel), a text diff (the extracted page text), or both. When a check crosses your threshold, Rendex stores the before frame, the after frame, and an overlay that rings the changed regions in orange, then fires your alerts. The change notification carries the before, after, and overlay images, so the alert itself shows what moved.

The full surface is available the day it ships: a REST API under /v1/watches, the JavaScript and Python SDKs, the Rendex MCP server for AI agents, a native n8n node, and a Zapier app. See the Rendex Watch overview for the product tour, or the Watch API reference for every parameter.

Why a visual diff catches more

Text and DOM diffs miss anything that breaks visually without changing the markup: a CSS regression, an image that fails to load, a font swap, a layout shift from an ad slot, a render that white-screens on a JavaScript error. A real-browser visual diff catches those because it compares what the page actually drew. The overlay then tells you where to look instead of leaving you to hunt through a full-page screenshot. For monitors built around content rather than layout, the text diff runs in the same check.

Create a watch

A watch is one POST to /v1/watches. Pass the URL, how it should detect change (diffMode is visual, text, or both), and how often to check (intervalMinutes). The optional threshold is a 0 to 1 noise floor the visual diff must exceed before a check counts as changed.

# Get your API key at rendex.dev/login
curl -X POST https://api.rendex.dev/v1/watches \
  -H "Authorization: Bearer rdx_YOUR_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com/pricing",
    "name": "Competitor pricing",
    "diffMode": "both",
    "intervalMinutes": 180,
    "threshold": 0.02,
    "webhookUrl": "https://your.app/hooks/rendex"
  }'

The first check establishes the baseline. Every check after that compares against it, and the baseline advances when a real change is confirmed, so you are always measuring against the most recent known-good frame. Each scheduled check is one render credit from the same pool your screenshots and PDFs draw on.

From an SDK, MCP, or no-code

The JavaScript and Python SDKs wrap the same endpoint. The JS SDK exposes createWatch, listWatches, getWatch, updateWatch, deleteWatch, runWatch, listWatchRuns, and testWatch; the Python SDK ships the snake_case equivalents.

// npm install @copperline/rendex
import { Rendex } from "@copperline/rendex";

const rendex = new Rendex("rdx_YOUR_KEY");

const watch = await rendex.createWatch({
  url: "https://example.com/pricing",
  diffMode: "both",
  intervalMinutes: 180,
  threshold: 0.02,
  webhookUrl: "https://your.app/hooks/rendex",
});

console.log(watch.id);

For no-code and agent workflows, the surface is native. The Rendex MCP server adds watch_create, watch_list, watch_get, watch_run, watch_test, watch_runs, and watch_delete so an AI agent can set up and read monitors. The n8n node adds a Watch resource and a "Rendex Watch Trigger" that starts a workflow when a page changes, and the Zapier app adds the same actions plus a "Website Changed" trigger. Want to see what Rendex captures for a URL before you commit a watch? The Preview a Website Watch tool runs a one-time capture in the browser.

Alerts: email and webhook

Email alerts work on every plan. Signed webhooks are available from the Starter tier and up. On a change, Rendex POSTs an HMAC-signed watch.changed event (with watch.recovered and watch.error for the recovery and failure transitions). The payload carries the change magnitude and signed image URLs.

{
  "event": "watch.changed",
  "watchId": "8f3c...",
  "url": "https://example.com/pricing",
  "changed": true,
  "diffScore": 0.067,
  "diffPixels": 48210,
  "beforeUrl": "https://rendex.dev/i/...signed",
  "afterUrl": "https://rendex.dev/i/...signed",
  "diffOverlayUrl": "https://rendex.dev/i/...signed"
}

Verify the signature before you trust the body. The JS and Python SDKs ship a verifyWebhook helper that checks the HMAC against your signing secret. The same signing scheme backs the async render webhooks, documented in the webhooks reference. To clear or replace an alert channel later, send an updateWatch call. The SDK reference lists every method.

Limits and notes

Watch counts and check frequency scale with your plan: Free monitors 1 page on a daily check, Starter 10 pages as often as every 3 hours, Pro 50 pages as often as every 30 minutes, and Enterprise 1,000 pages as often as every 5 minutes (counts are total, active plus paused). Geo-targeted checks, which render the page from a chosen country, are on Pro and Enterprise. There is no overage: if your credit pool runs out, the watch pauses rather than billing past the cap, and you resume it when you top up.

A note on what is not here yet: the AI "what changed" written summary is on the roadmap, not shipped. Today the change event gives you the visual overlay, the change magnitude, and the text diff, which is enough to route and triage. For a feature-by-feature look at how Watch compares to standalone monitors, see the best website monitoring tools roundup.

Get started

If you already use Rendex for screenshots or PDF, Watch needs no new account, key, or bill: it draws from the same credit pool. Create your first watch from the Rendex Watch page or jump straight into the dashboard.

Start for free at rendex.dev/login. The free tier includes 1 watch on a daily check, with email alerts, alongside 500 render calls a month. No credit card required.

Rendex Is Now a Verified n8n Community Node

Dan E — Mon, 15 Jun 2026 19:46:43 +0000

Rendex Is Now a Verified n8n Community Node

The Rendex n8n node passed the n8n team's verification review and went live on n8n Cloud on April 30. Search "Rendex" on the n8n canvas and the node appears. No JSON file editing, no manual npm installs inside a self-hosted instance.

This post covers what the verified Rendex n8n node provides, how to set it up in under five minutes, and how to use it as an AI Agent tool for autonomous web capture.

Why Verification Matters

Before the verified status, adding Rendex to an n8n workflow meant using the generic HTTP module: configure the endpoint URL manually, build the request body by hand, set the Authorization header, and parse a binary response yourself. Every update to the API meant updating the HTTP node config.

The verified Rendex n8n node replaces all of that with a purpose-built node: typed dropdowns for resources and operations, a dedicated credential type for your API key, and typed fields for every capture parameter. n8n's credential store handles the key; you never paste it into a request body.

Verified status also means n8n reviews the node on each release before it reaches users. Self-hosted instances with verified community nodes enabled pull updates through the standard n8n update path.

Install the Node

On n8n Cloud, the node is available by default. Open any workflow, click the "+" button to add a node, and search "Rendex".

On a self-hosted instance, go to Admin Panel > Community Nodes and enable verified community nodes if the toggle is off. Then search the canvas as above. The package name is n8n-nodes-rendex if you need it for allowlists.

Add Credentials

After adding the node to a workflow, click Credentials > Create New > Rendex API. Paste your API key (get one at rendex.dev/login). The key starts with rdx_live_. Save the credential and the node is ready.

Capture a Screenshot

Set Resource to Screenshot and Operation to Capture. Enter a URL, choose a format in Additional Options, and execute the workflow. The node outputs binary data (the image) alongside a JSON metadata item.

{
  "resource": "screenshot",
  "operation": "capture",
  "url": "https://example.com",
  "additionalOptions": {
    "format": "png",
    "fullPage": true,
    "viewportWidth": 1440,
    "blockAds": true
  }
}

For PDF output, set format to pdf in Additional Options. Page size, margins, and print backgrounds are all configurable. See the n8n integration docs for the full parameter list.

Submit a Batch

The Batch > Submit operation takes a newline-separated list of URLs and submits them as a single batch request. Rendex processes them in parallel and returns a batch ID. Poll the batch status with Batch > Get Status or set a webhook URL in Additional Options to receive a callback when the batch finishes.

{
  "resource": "batch",
  "operation": "submit",
  "urls": "https://northwindanalytics.com/\nhttps://northwindanalytics.com/pricing\nhttps://northwindanalytics.com/docs\nhttps://northwindanalytics.com/blog\nhttps://northwindanalytics.com/annual-report",
  "defaults": {
    "format": "png",
    "fullPage": true
  }
}

Batch limits depend on your plan. Each captured URL returns a signed storage URL you can pass to a downstream node to upload, email, or store. Try the free screenshot tool to test individual captures before wiring up a batch.

Output: a Batch Capture Report

The workflow below submits five URLs, waits for the batch to complete, and passes the results to a Code node that renders a report via the Rendex n8n node's Screenshot > Capture operation with an HTML template.

Use as an AI Agent Tool

The Rendex n8n node is built with usableAsTool: true, which means you can attach it directly to an n8n AI Agent node. The agent receives the node as a callable tool and decides when to invoke it based on the conversation or task context.

{
  "type": "n8n-nodes-base.agent",
  "parameters": {
    "agent": "toolsAgent",
    "tools": ["rendex"]
  }
}

In practice this means an AI Agent can capture a screenshot mid-task without any extra branching logic. The agent calls the Rendex n8n node the same way it calls a search tool or a calculator. Pair it with a vision model node downstream to analyze what was captured.

What the Node Covers

The Rendex n8n node exposes four resources:

Screenshot: Capture (sync) and Capture Async. Sync returns binary data in the same workflow step. Async fires the job and returns a job ID immediately, which is useful for long-running full-page captures.
Document: Extract. Turns any URL into clean Markdown, JSON, or article HTML pulled from the fully-rendered page. Useful for feeding scraped content to an LLM node downstream.
Job: Get Status. Polls an async capture job for progress and the signed result URL.
Batch: Submit and Get Status. Submit up to 500 URLs per request and track the batch through to completion.

Limits and Notes

A few things to keep in mind:

Async polling: Capture Async returns a job ID, not the image. Add a Job > Get Status node in a loop or configure a webhook URL in Additional Options so Rendex calls your n8n webhook trigger on completion.
Batch inputs are URL-only: The Batch Submit operation does not accept HTML or Markdown payloads in the URLs list. To render an HTML template to multiple outputs, loop over Screenshot > Capture with Source set to HTML.
Batch size caps: The maximum URLs per batch depends on your plan. Check the pricing page for plan-level limits.
Binary output: Sync captures return binary data in n8n's binary item format. Connect to a Write Binary File node or an email attachment node downstream.

Next Steps

The n8n integration docs list every parameter available in Additional Options, including wait strategies, viewport sizing, cookie injection, and geo-targeting.

For a complete workflow that generates invoice PDFs from an HTML template triggered by a webhook, read Automate Invoice and Document Generation in n8n with Rendex.

Get an API key at rendex.dev/login. The free tier includes 500 captures per month to get started.

Render an HTML Table to PNG in Python (5 Ways, 2026)

Dan E — Sun, 07 Jun 2026 17:15:07 +0000

You have an HTML table — a financial summary, a report section, a styled DataFrame, a chart your frontend already renders — and you need it as a PNG from a Python backend. A cron job that emails a nightly report, an invoice rasterized into a PDF, a certificate generated per customer. The HTML is the easy part; turning it into a pixel-accurate image is where the options get messy.

This guide covers five working approaches, from a single API call to a headless browser you host yourself, plus an honest note on where each one bites. Every snippet renders the same little table so you can compare them directly. (All facts verified June 2026 — wkhtmltopdf is now archived, which changes the usual advice.)

Method 1: Rendex API (no browser to host)

The fastest path, and the one that needs nothing on your machine. POST the HTML to the Rendex rendering API and get PNG bytes back. A real, modern Chromium runs on Cloudflare's edge — you don't install, patch, or keep a browser alive, and modern CSS (Flexbox, Grid, web fonts) renders exactly as it would in Chrome.

# pip install rendex
from rendex import Rendex
from pathlib import Path

rendex = Rendex("YOUR_API_KEY")

html = """
<table style="border-collapse:collapse;font-family:system-ui;font-size:14px">
  <thead>
    <tr style="background:#f1f5f9">
      <th style="text-align:left;padding:8px 14px">Line item</th>
      <th style="text-align:right;padding:8px 14px">Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr><td style="padding:8px 14px">Subscriptions</td>
        <td style="text-align:right;padding:8px 14px">€482,100</td></tr>
    <tr><td style="padding:8px 14px">Professional services</td>
        <td style="text-align:right;padding:8px 14px">€91,400</td></tr>
  </tbody>
</table>
"""

result = rendex.render_html(html, format="png", device_scale_factor=2)
Path("table.png").write_bytes(result.image)
print("Rendered", result.metadata)

Because the table is the only thing on the page, render at device_scale_factor=2 for a crisp 2× image, and add full_page=True when a long table runs past the viewport. No SDK? The same call over raw HTTP:

curl -X POST https://api.rendex.dev/v1/screenshot \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  --output table.png \
  -d '{
    "html": "<table style=\"border-collapse:collapse;font-family:system-ui\"><tr><th>Line item</th><th>Amount</th></tr><tr><td>Subscriptions</td><td>€482,100</td></tr></table>",
    "format": "png",
    "deviceScaleFactor": 2,
    "fullPage": true
  }'

When to use: production report pipelines, anything you deploy to a serverless function or a slim container, and any time you don't want a Chromium binary in your image. The free tier is 500 renders/month, no card — grab a key. For the full report-to-PDF-deliverable pattern (templating with a data{} object, embedding the PNG in a generated PDF), see the Python report-rendering recipe.

The trade-off, honestly: it's a network call and a per-render cost, and the HTML leaves your box. For a sync render Rendex processes it transiently and doesn't store it; if that's a dealbreaker for sensitive data, one of the self-hosted options below keeps everything local.

Method 2: html2image (lightweight, but you supply Chrome)

html2image is a thin wrapper around the headless mode of a Chrome/Chromium/Edge that is already installed on the machine — it doesn't bundle one. Maintained (latest 2.0.7, May 2025), MIT, and genuinely the simplest local route when a browser is already present.

# pip install html2image   (Chrome/Chromium/Edge must already be installed)
from html2image import Html2Image

hti = Html2Image()
html = "<table border=1><tr><th>Line item</th><th>Amount</th></tr>" \
       "<tr><td>Subscriptions</td><td>€482,100</td></tr></table>"

hti.screenshot(html_str=html, save_as="table.png", size=(600, 200))

Where it bites: you own keeping that Chrome patched and version-matched across every machine and CI runner, and fonts/emoji are whatever the host browser ships — Linux base images often lack CJK and color-emoji fonts, so you'll install font packages to avoid tofu boxes.

Method 3: Playwright (the modern self-hosted default)

If you're going to run a browser yourself, Playwright for Python is the current standard (1.60, May 2026, with evergreen bundled browsers). set_content() loads your HTML; locate the table and screenshot just that element.

# pip install playwright  &&  playwright install chromium
from playwright.sync_api import sync_playwright

html = "<table border=1><tr><th>Line item</th><th>Amount</th></tr>" \
       "<tr><td>Subscriptions</td><td>€482,100</td></tr></table>"

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page()
    page.set_content(html)
    page.locator("table").screenshot(path="table.png")  # crop to the table
    browser.close()

Where it bites: the bundled browsers are hundreds of MB in your image; you patch them; and a long-running process leaks memory and leaves zombie processes if you don't close contexts. Full-page shots over ~16,384px can OOM. Great control — you just operate the browser fleet now.

Method 4: imgkit / wkhtmltoimage (works, but the engine is archived)

imgkit wraps the wkhtmltoimage binary. It's the classic answer to this question, and the one to be most careful with in 2026.

# pip install imgkit   +   system binary: apt-get install wkhtmltopdf
import imgkit

html = "<table border=1><tr><th>Line item</th><th>Amount</th></tr>" \
       "<tr><td>Subscriptions</td><td>€482,100</td></tr></table>"

imgkit.from_string(html, "table.png")  # headless box: wrap in xvfb-run

Where it bites: the underlying wkhtmltoimage/wkhtmltopdf engine was archived in January 2023 (last stable release June 2020) and gets no security patches. It's a frozen, old WebKit: modern CSS Flex/Grid, web fonts, and emoji are broken or silently dropped, and on a headless server it throws QXcbConnection: Could not connect to display unless you wrap every call in xvfb-run. imgkit itself is effectively unmaintained (last release 1.2.3). Fine for a legacy script; not what you'd start a new project on.

Method 5: Selenium (works, heaviest for one PNG)

Selenium drives a real browser and can screenshot an element. It's maintained and battle-tested, but it's the most boilerplate for "HTML string → one PNG."

# pip install selenium   (Selenium Manager fetches a matching ChromeDriver)
import urllib.parse
from selenium import webdriver
from selenium.webdriver.chrome.options import Options

html = "<table border=1><tr><th>Line item</th><th>Amount</th></tr>" \
       "<tr><td>Subscriptions</td><td>€482,100</td></tr></table>"

opts = Options()
opts.add_argument("--headless=new")
driver = webdriver.Chrome(options=opts)
driver.get("data:text/html;charset=utf-8," + urllib.parse.quote(html))
driver.find_element("tag name", "table").screenshot("table.png")
driver.quit()

Where it bites: the classic SessionNotCreatedException when ChromeDriver and the host Chrome drift apart (Selenium Manager mostly handles this now), full-page screenshots aren't first-class, and it's the same browser-fleet ownership as Playwright with more ceremony.

A note on WeasyPrint

WeasyPrint comes up in every "HTML to image" search, so it's worth being precise: it's an excellent, actively-maintained pure-Python engine — but it renders to PDF only (PNG export was removed in v53) and runs no JavaScript. If your table is static HTML/CSS and you actually want a PDF, WeasyPrint is a great, dependency-light choice and you don't need any of the above. If you need a PNG, or your table/chart is built by JavaScript, it can't do the job without a second PDF→PNG conversion step.

Which one should you use?

Approach	Browser to host?	PNG?	Best for
Rendex API	No (runs on the edge)	Yes	Production pipelines, serverless, no infra to own
html2image	Yes (you supply Chrome)	Yes	Quick local jobs where a browser is already present
Playwright	Yes (bundled)	Yes	Full browser control, if you want to run the fleet
imgkit / wkhtmltoimage	No (archived engine)	Yes	Legacy scripts only — engine archived 2023
Selenium	Yes	Yes (viewport)	Teams already standardized on Selenium
WeasyPrint	No	No (PDF only)	Static HTML → PDF, no JS

The honest summary: the self-hosted libraries all work — the real question is whether you want to own a browser (install, patch, scale, debug fonts, watch memory) for what is often a side-task to your actual report logic. If yes, Playwright is the modern pick. If you'd rather keep your deployment a plain Python service and POST HTML to get a PNG back, that's exactly what Rendex is for — 500 free renders a month to prove the pipeline before you scale.