n8n Code to Image Workflow: HTML/CSS to PNG/JPEG/WebP

Turn HTML/CSS into PNG, JPEG, or WebP—automatically in n8n

This n8n workflow takes your HTML and CSS, sends it to the Code to Image API to render an image, and then returns the result as a downloadable file or a temporary image URL. Great for generating consistent visuals on demand—no manual screenshotting needed.

What this workflow does

• Runs on demand or via webhook: you can click Test workflow with a built-in sample payload or trigger it using a POST request to the workflow webhook.
• Normalizes and defaults inputs: it standardizes incoming fields (such as html, css, width, height, format, and output) and applies defaults when values are missing.
• Renders through Code to Image: it sends the render request to the Code to Image API and generates the image in the requested format.
• Handles errors clearly: if the API returns an error, it responds with a 400 JSON payload containing a readable error and message.
• Returns the result: on success, it either returns JSON with a temporary image URL (with expiry) or returns the rendered image as binary data.

Use cases

• Generate branded previews from HTML/CSS for SaaS dashboards or marketing pages.
• Create consistent thumbnail images from templates inside automated pipelines.
• Produce images in PNG/JPEG/WebP for workflows that need multiple formats.
• Let external apps request on-demand rendering via the webhook.

Technical details

• Required account: Code to Image (API key; free tier includes 50 renders/month, no watermark per codetoimage.app).
• Auth setup: configure an HTTP Header Auth credential in n8n using header name x-api-key (set this on the Code to Image request; no credentials are stored in the workflow).
• Workflow nodes: manual trigger, webhook, http request, plus logic nodes such as if, set, and sticky note.
• Customization: adjust html, css, width, height (1–4096), format, and output behavior.