n8n: HTML/CSS to Image API

Generate images, website screenshots, PDFs, and signed image URLs in your n8n workflows.

Install in n8n View package on npm Get an API Key

Verified by n8n

The HTML/CSS to Image integration is verified by n8n and available for both n8n Cloud and self-hosted instances.

Install the integration

An n8n instance owner or admin can install the verified node for everyone on the instance:

Open a workflow in n8n and select + to open the Nodes panel.
Search for HTML/CSS to Image API.
Select the node under More from the community.
Select Install.
Add the node to your workflow.

See n8n’s verified community-node installation guide for instance settings and the latest installation details.

Manual installation on self-hosted n8n

Most users should install the verified node from the Nodes panel. If you manage community packages manually—for example, on an n8n instance running in queue mode—you can install the package from npm instead:

mkdir -p ~/.n8n/nodes
cd ~/.n8n/nodes
npm install @html-css-to-image/n8n-nodes-html-css-to-image

Restart n8n after installation. This method is only for self-hosted instances; it isn’t needed or available on n8n Cloud.

See n8n’s manual community-node installation guide for Docker and queue-mode details.

Add your credentials

Open the HTML/CSS to Image node and create a new HTML/CSS to Image API credential.
Copy your API ID and API Key from the HTML/CSS to Image dashboard.
Enter both values and save the credential.

n8n stores the values in its encrypted credential store and tests them against the HTML/CSS to Image ping endpoint.

Available operations

Create From HTML/CSS — Render HTML and CSS as an image or PDF.
Create From URL — Take a screenshot of a public webpage.
Create From Template — Render a saved template with dynamic values.
Delete — Permanently delete an image by ID.
Generate Signed URL — Create a signed template or webpage URL that renders on demand.

All input fields support n8n expressions, so content and options can come from earlier workflow steps.

Choose the output

Image creation operations can return:

The generated image URL and metadata
A binary PNG, JPG, WebP, or PDF file
Both metadata and a binary file

Use binary output when the next node needs a file, such as an email, Slack, S3, or Google Drive node.

Example workflow

To render HTML produced by an earlier step:

Add an HTML/CSS to Image API node.
Select Create From HTML/CSS.
Set HTML to an expression such as {{$json.html}}.
Add CSS and any rendering options you need.
Select URL and Metadata or a binary output.
Execute the workflow.

For saved templates, add each variable under Template Values. You can choose the value type for each property or use an expression that resolves to an object.