Lee este artículo en español.
How to turn HTML into an image in n8n (with a single node)
If you automate with n8n, sooner or later you need to generate an image inside a workflow: a social card, a video thumbnail, a receipt, a certificate or an Open Graph image so your link looks good when shared. The good news is you don't have to run a server or install anything. With the plain HTTP Request node and the Cofferdock API, you can set it up in a minute.
One thing up front, because people search for it: n8n has no dedicated "HTML to image" node. You do it with the HTTP Request node calling an API that does the heavy lifting. Here's exactly how, field by field.
What you'll get
You send your design written in HTML (with its CSS, images and fonts) and you get the image back in PNG or JPEG, ready for the next step of your workflow. No conversion steps in between: the node's output is already the image file.
Common uses in n8n:
- One social card per row of a spreadsheet.
- The Open Graph image for every new blog post.
- Receipts or tickets as images from order data.
- Automatic thumbnails for your videos or newsletters.
What you need
- A Cofferdock account. The free plan gives you 50 uses a month with no card, plenty to test.
- Your API key, which you create in your dashboard with "+ Create key". It's shown only once, so copy and save it.
- An HTTP Request node in your n8n workflow.
Step by step in the HTTP Request node
Add an HTTP Request node and fill it in like this:
- Method:
POST - URL:
https://api.cofferdock.com/capture - Send Query Parameters: on, and add the size as separate fields:
width=1200andheight=630. - Send Headers: on, add two headers:
x-api-keywith your key, andContent-Typewith the valuetext/html. - Send Body: on → set Body Content Type to
Raw→ in Body, paste your HTML (or connect it from a previous step). - Under Options → Response → Response Format, choose File.
That's it. The node's output is the image as a file, ready to connect to Google Drive, Gmail, Telegram or wherever you need it. One node and done.
A clear example
Say you have a Google Sheet with quotes and you want one social card per quote. The workflow would be:
- A Google Sheets node that reads the rows.
- A Set (or Edit Fields) node that builds the card's HTML with that row's quote.
- The HTTP Request node above, which turns that HTML into an image.
- A Google Drive node that saves the image (or Gmail that sends it).
Each loop gives you a different image, with nothing done by hand. That's exactly the kind of repetitive task n8n is great at.
Options you can tweak
Add them as Query Parameters in the same node:
| Option | Default | What it does |
|---|---|---|
width | 1200 | Image width in pixels. |
height | 630 | Image height in pixels. |
format | png | Format: png or jpeg. |
full_page | false | Set to true if your design is taller than the given height and you want the whole thing. |
wait_ms | 0 | Wait a few milliseconds before the shot, in case something loads late (max 5000). |
You can use background photos, logos and fonts hosted online by putting their https://… link inside the HTML or CSS. The design is rendered without running JavaScript, so work with HTML and CSS.
Prefer to see it in code?
The same call with curl, in case you want to try it quickly outside n8n:
curl -X POST "https://api.cofferdock.com/capture?width=1200&height=630" \
-H "x-api-key: YOUR_KEY" \
-H "Content-Type: text/html" \
--data-binary "<h1 style='color:#8a5210'>Hello</h1>" \
-o image.png
How much does it cost?
Each image spends 1 credit from your plan. Every Cofferdock tool draws from the same pool of credits, so you don't have to buy separate services for each thing.
FAQ
Does n8n have a native HTML to image node? No. You do it with the HTTP Request node calling the Cofferdock API, which generates the image.
Do I need to know how to code? No. You just fill in the HTTP Request node's fields following this guide. The code examples are optional.
Do I get a link or the file? The image file itself. With Response Format: File, the next node already receives the image, ready to save or send.
Can I generate images in a loop? Yes. If the previous node returns several rows, n8n runs the HTTP Request once per row and you get one image per item.
Try it yourself
You'll find the full instructions, with copy-and-paste examples, on the HTML to image tool page. And if you don't have an account yet, you can create one for free and build your first workflow today.