DEV Community

Dan E
Dan E

Posted on • Originally published at rendex.dev

Render HTML and Screenshots in Zapier (No-Code)

#zapier #nocode #automation #tutorial

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.

Branded invoice PDF rendered by Rendex from a Zapier Template Values dict with client name, invoice number, and total

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
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)