{"product_id":"n8n-code-to-image-workflow-html-css-to-png-jpeg-webp","title":"n8n Code to Image Workflow: HTML\/CSS to PNG\/JPEG\/WebP","description":"\u003ch3\u003eTurn HTML\/CSS into PNG, JPEG, or WebP—automatically in n8n\u003c\/h3\u003e\n\u003cp\u003eThis n8n workflow takes your HTML and CSS, sends it to the \u003cstrong\u003eCode to Image API\u003c\/strong\u003e 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.\u003c\/p\u003e\n\n\u003ch3\u003eWhat this workflow does\u003c\/h3\u003e\n\u003cul\u003e\n  \u003cli\u003e\n\u003cstrong\u003eRuns on demand or via webhook:\u003c\/strong\u003e you can click \u003cem\u003eTest workflow\u003c\/em\u003e with a built-in sample payload or trigger it using a POST request to the workflow webhook.\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eNormalizes and defaults inputs:\u003c\/strong\u003e it standardizes incoming fields (such as \u003ccode\u003ehtml\u003c\/code\u003e, \u003ccode\u003ecss\u003c\/code\u003e, \u003ccode\u003ewidth\u003c\/code\u003e, \u003ccode\u003eheight\u003c\/code\u003e, \u003ccode\u003eformat\u003c\/code\u003e, and \u003ccode\u003eoutput\u003c\/code\u003e) and applies defaults when values are missing.\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eRenders through Code to Image:\u003c\/strong\u003e it sends the render request to the Code to Image API and generates the image in the requested format.\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eHandles errors clearly:\u003c\/strong\u003e if the API returns an error, it responds with a \u003cstrong\u003e400 JSON\u003c\/strong\u003e payload containing a readable error and message.\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eReturns the result:\u003c\/strong\u003e on success, it either returns JSON with a \u003cem\u003etemporary image URL\u003c\/em\u003e (with expiry) or returns the rendered image as \u003cem\u003ebinary data\u003c\/em\u003e.\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003ch3\u003eUse cases\u003c\/h3\u003e\n\u003cul\u003e\n  \u003cli\u003eGenerate branded previews from HTML\/CSS for SaaS dashboards or marketing pages.\u003c\/li\u003e\n  \u003cli\u003eCreate consistent thumbnail images from templates inside automated pipelines.\u003c\/li\u003e\n  \u003cli\u003eProduce images in \u003cstrong\u003ePNG\/JPEG\/WebP\u003c\/strong\u003e for workflows that need multiple formats.\u003c\/li\u003e\n  \u003cli\u003eLet external apps request on-demand rendering via the webhook.\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003ch3\u003eTechnical details\u003c\/h3\u003e\n\u003cul\u003e\n  \u003cli\u003e\n\u003cstrong\u003eRequired account:\u003c\/strong\u003e Code to Image (API key; free tier includes 50 renders\/month, no watermark per \u003ccode\u003ecodetoimage.app\u003c\/code\u003e).\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eAuth setup:\u003c\/strong\u003e configure an \u003cstrong\u003eHTTP Header Auth\u003c\/strong\u003e credential in n8n using header name \u003ccode\u003ex-api-key\u003c\/code\u003e (set this on the Code to Image request; no credentials are stored in the workflow).\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eWorkflow nodes:\u003c\/strong\u003e \u003ccode\u003emanual trigger\u003c\/code\u003e, \u003ccode\u003ewebhook\u003c\/code\u003e, \u003ccode\u003ehttp request\u003c\/code\u003e, plus logic nodes such as \u003ccode\u003eif\u003c\/code\u003e, \u003ccode\u003eset\u003c\/code\u003e, and \u003ccode\u003esticky note\u003c\/code\u003e.\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eCustomization:\u003c\/strong\u003e adjust \u003ccode\u003ehtml\u003c\/code\u003e, \u003ccode\u003ecss\u003c\/code\u003e, \u003ccode\u003ewidth\u003c\/code\u003e, \u003ccode\u003eheight\u003c\/code\u003e (1–4096), \u003ccode\u003eformat\u003c\/code\u003e, and output behavior.\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"N8N Commerce","offers":[{"title":"Default Title","offer_id":46086650462387,"sku":"N8N-19912","price":69.99,"currency_code":"GBP","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0749\/6279\/6723\/files\/wd6dDHi2WvdZYRdCkjri4_wXMY2VlP.png?v=1790327235","url":"https:\/\/buyflowscripts.com\/products\/n8n-code-to-image-workflow-html-css-to-png-jpeg-webp","provider":"N8N Commerce","version":"1.0","type":"link"}