Español

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:

What you need

Step by step in the HTTP Request node

Add an HTTP Request node and fill it in like this:

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:

  1. A Google Sheets node that reads the rows.
  2. A Set (or Edit Fields) node that builds the card's HTML with that row's quote.
  3. The HTTP Request node above, which turns that HTML into an image.
  4. 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:

OptionDefaultWhat it does
width1200Image width in pixels.
height630Image height in pixels.
formatpngFormat: png or jpeg.
full_pagefalseSet to true if your design is taller than the given height and you want the whole thing.
wait_ms0Wait 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.