HTML/CSS to Image
Developer ToolsTurn HTML and CSS into pixel-perfect PNG, JPG, WebP, or PDF files with the HTML/CSS to Image API, rendering exactly like Chrome. Agents generate social cards and report visuals per record.
What This Integration Enables
HTML/CSS to Image treats the template as a real asset rather than a string you paste into a request. Templates are saved server-side with Handlebars variables, every edit creates a new version, and List Template Versions keeps the old ones renderable. Paired with signed URLs, that produces something the other renderers in this category do not: a public, tamper-proof link that generates the image on first request with no API call at render time. That is exactly what an og:image tag needs, because the crawler asking for it is not your flow.
The fidelity claim is the other half. HCTI renders in headless Chrome and is positioned on rendering exactly as Chrome does, with Google Fonts, retina device scaling, fixed viewports, element cropping, render delays, transparent backgrounds, and dark mode all exposed as render options. The same call produces PDF when you need print geometry instead of pixels, so an invoice and a share card come out of one connector. FlowRunner agents call Create Image From HTML for one-off renders, Create Image From Template for repeatable designs, and Create Images Batch when a dataset needs up to 25 variations in a single request. Every one of those returns a permanent CDN-cached URL, which is a durability guarantee and a hazard in the same sentence, and it is the reason this page has a gate on template edits.
Without FlowRunner
With FlowRunner
Use Case Scenarios
Social cards that generate themselves at publish time
An editorial team publishes in WordPress. On publish, the agent reads the headline and category, calls Generate Signed Template URL against the saved card template, and writes the result into the post's Open Graph tags. No image is rendered until a crawler or a reader actually requests one, so drafts that never ship cost nothing. The preview posts into the content channel first, where a person can look at how a 92-character headline actually wraps before the link is shared anywhere.
Certificates and receipts as print-ready PDFs
A training program marks a learner complete. The agent calls Create Image From Template with the learner name, course, and completion date, using the PDF page options so the output is print geometry rather than a screen-sized image, then calls Download Image To File Storage to keep a durable copy. The certificate goes out through SendGrid and the file URL is written back to the learner record. One template, one version history, every certificate consistent.
Personalized campaign graphics in batches
A campaign needs a variant graphic per account segment. The agent pulls the segments from HubSpot, puts the shared render settings into Default Options, and calls Create Images Batch so up to 25 variations come back in one request instead of 25 separate calls. Get Account Usage runs first so the flow knows how much of the plan the run will consume. The finished URLs are attached to the campaign records for the sends that follow.
Human-in-Loop Highlight
Update Template is the operation on this connector that reaches backwards in time. Images created from a template ID automatically use the newest version, and signed template URLs render on demand, which together mean a template edit silently re-renders every card already sitting in a sent newsletter, an indexed page, and a social post someone shared last month. Nothing about the edit looks dangerous at the moment you make it. So when an agent is about to promote a revised layout, it stops and shows its work in the marketing channel: "Template og-card v7 is ready. It changes the logo lockup and the headline size. Live signed URLs pointing at this template: 1,940, including 6 campaigns already sent. Publishing v7 re-renders all of them. Earlier versions stay renderable, so I can also pin new cards to v7 and leave existing links on v6. Which?" That last option is only available because the vendor keeps every version, and only useful because a person decided which assets are allowed to change after delivery. This is the whole point of human-in-the-loop as FlowRunner builds it: agents can do the render. The call about what a customer already received is not theirs.
Agent Capabilities
15 actionsImage Generation
4- Create Image From HTML Renders an HTML snippet or full page with optional CSS into an image and returns a permanent, CDN-cached URL. Supports Google Fonts, retina scaling, fixed viewports, element cropping via a CSS selector, render delays, transparent backgrounds, and PDF page options. Used for one-off renders where the markup is assembled in the flow.
- Capture URL Screenshot Screenshots any publicly accessible webpage and returns a permanent, CDN-cached URL. Supports full-page capture, mobile and landscape emulation, cookie consent banner blocking, custom request headers, element cropping, and render delays. Used for monitoring, archiving, and capturing pages that need authentication headers to load.
- Create Image From Template Renders a saved template by substituting Handlebars variables with supplied values, using the latest version unless a specific version is named. Used for repeatable designs such as Open Graph cards, certificates, and receipts.
- Create Images Batch Creates up to 25 images in a single request, cheaper in API calls than rendering them one at a time. Shared settings go in Default Options and each variation can override them. Used when a dataset needs a per-record graphic.
Templates
4- Create Template Saves reusable HTML and CSS as a template containing Handlebars variables that are replaced at render time, returning the template ID and version. Used to move a layout out of the request body and into a versioned asset.
- Update Template Saves a new version of an existing template with revised HTML, CSS, name, or description. New renders pick up the newest version automatically while earlier versions stay renderable by number. This is the operation the human-in-loop gate above is built on.
- List Templates Returns every template on the account with its ID, current version, markup, render defaults, render count, and timestamps. Used to discover template IDs and to audit which layouts are actually being used.
- List Template Versions Returns every stored revision of a single template with its markup, render settings, and version number. Used to render an older revision deliberately, or to show a reviewer what a proposed change actually alters.
Signed URLs
2- Generate Signed Image URL Builds a signed create-and-render URL that produces the image the first time it is requested, with no API call made at build time. The query string is signed with an HMAC SHA256 token derived from the API key, so the link cannot be tampered with. Used to embed a render directly in a page or email.
- Generate Signed Template URL Builds a signed template URL that renders a saved template on demand with supplied values, sorted and JSON encoded before signing. Used for og:image and twitter:image tags that must resolve to a live image without the flow rendering it in advance.
Image Management
3- List Images Lists images previously created by the account, newest first, with IDs, permanent URLs, and creation timestamps, paginated by token. Note that the vendor publishes this endpoint but it currently answers 404 where sibling endpoints answer 401, so it may be unavailable on a given plan. Keep the image IDs returned at creation time rather than relying on this listing.
- Delete Image Permanently deletes a single image and purges it from the CDN cache. All copies are removed and the action cannot be undone, so any page still referencing the URL breaks.
- Delete Images Batch Permanently deletes several images by ID in one request and purges them from the CDN. Used for bulk cleanup of temporary renders. Deletion cannot be undone.
Files and Account
2- Download Image To File Storage Downloads a created image from the CDN into FlowRunner file storage and returns a FlowRunner URL that can be attached to email or passed to other actions. Supports on-the-fly resizing, DPI metadata, and aspect ratio cropping during the download.
- Get Account Usage Returns images created by the account rolled up by hour, day, and month plus billing period totals. Used to monitor consumption and to alert before a batch pushes the account into a new tier.
Frequently Asked Questions
What can FlowRunner do with HTML/CSS to Image?
FlowRunner agents can run Create Image From HTML, Capture URL Screenshot, and Create Image From Template in HTML/CSS to Image, plus 12 more actions.
Does connecting HTML/CSS to Image to FlowRunner require OAuth?
No. HTML/CSS to Image connects to FlowRunner with basic authentication (a username and password), no OAuth flow required.
Can HTML/CSS to Image trigger a FlowRunner workflow automatically?
HTML/CSS to Image doesn't currently expose triggers in FlowRunner. It connects as an action step inside workflows started by another trigger.
Start building with HTML/CSS to Image
$100 in credits. No card required. Connect in minutes.