HTML and CSS to images in n8n, in one workflow.
A ready-made workflow template that renders any HTML and CSS to PNG, JPEG or WebP with codetoimage. Start it by hand or from a webhook, get the image back as a file or as a hosted link, and get readable errors instead of failed executions.
What you get
Two ways in
Click Test workflow and edit the sample fields, or POST JSON to the built-in webhook from any app. Swap the manual trigger for RSS, Airtable or Google Sheets to automate it.
Two ways out
The image as a binary file, ready for Slack, Gmail, Google Drive, S3 or Telegram nodes. Or a temporary hosted URL you can paste into a sheet, a CMS or an og:image tag.
Readable errors
A wrong key, an empty credit pool or invalid input comes back as { error, message } on its own branch, not as a red execution you have to open.
Install in 2 minutes
- Get a free API key (50 renders a month, no watermark).
- Download the workflow JSON below and import it in n8n: Workflows → Import from file.
- Open the Render with Code to Image node and create a Header Auth credential: name
x-api-key, value = your key. - Paste your HTML and CSS into Sample input and click Test workflow. The sample card renders as a 1200 × 630 PNG.
Call it from a webhook
Activate the workflow, then send the same fields as JSON. With output: "file" the response is the image; with output: "url" it is JSON with url and expires_at.
curl -X POST https://YOUR-N8N/webhook/codetoimage \
-H 'content-type: application/json' \
-d '{"html":"<h1>Hi</h1>","css":"h1{color:red}","width":800,"height":400,"format":"png","output":"file"}' \
--output image.pngFields
| Field | Required | Default | Notes |
|---|---|---|---|
| html | yes | – | Any HTML. Inline <style> and Google Fonts work. |
| css | no | empty | Extra stylesheet, applied on top of the HTML. |
| width, height | no | 1200 × 630 | 1 to 4096 px. |
| format | no | png | png, jpeg or webp. |
| output | no | file | file = binary image, url = temporary hosted link. |
Any other render API option (quality, transparent, backgroundColor, saved templates with variables) can be added to the JSON body of the HTTP Request node.
FAQ
Do I need a community node to use codetoimage in n8n?
No. The template uses only built-in nodes (Webhook, Edit Fields, HTTP Request, If, Respond to Webhook), so it works on n8n Cloud and on self-hosted instances without installing anything. Your API key lives in a standard Header Auth credential.
How do I generate Open Graph images or social cards for new content?
Replace the manual trigger with the trigger you already use (RSS, Airtable, Google Sheets, Notion, a CMS webhook), map the title and other fields into the html field, keep the rest of the workflow as is. The image comes back as a binary file you can upload anywhere, or as a hosted URL you can write back into your CMS.
What does a render cost from n8n?
The same as from the REST API, CLI or MCP server: one render is one credit. The free tier gives you 50 renders a month with no watermark; paid plans start at $9 a month for 1,000 renders, and prepaid packs start at $5.
Render your first image from n8n
Free tier: 50 renders/month, no watermark, no credit card.