Generate images, website screenshots, PDFs, and signed render-on-demand URLs with the HTML/CSS to Image API.
n8n is a workflow automation platform.
Follow the installation guide in the n8n community nodes documentation.
The community package name is:
@html-css-to-image/n8n-nodes-html-css-to-image
- Create an image or PDF from HTML and CSS
- Take a screenshot of a webpage URL
- Render a saved template with JSON values
- Generate signed template or webpage URLs that render on demand
- Return image metadata, a binary PNG/JPG/WebP/PDF, or both
Create an HTML/CSS to Image API account, then copy the API ID and API Key from the dashboard. The credential uses HTTP Basic authentication and n8n stores both values in its encrypted credential store.
This package is built and tested using the current @n8n/node-cli scaffolding and
Node.js LTS.
All fields support n8n expressions. For example, HTML from an earlier node can be
rendered with {{$json.html}}. Choose binary output when the next node expects a
file attachment, such as email, Slack, S3, or Google Drive.
Template values use n8n's typed field editor. Add each template variable by name and choose its value type, or use an expression that resolves to an object.
- Add an HTML/CSS to Image API node.
- Select Create From HTML/CSS.
- Set HTML to
{{$json.html}}. - Add CSS or rendering options as needed.
- Leave Output as URL and Metadata, or select a binary output for file-based nodes.
- Select Create From URL.
- Set URL to a fixed URL or an expression such as
{{$json.url}}. - Add viewport width and height together when a fixed viewport is required.
- Use the CSS option to inject page-specific overrides before rendering.
- Select Create From Template and enter the template ID.
- Under Template Values, add fields matching the variables in the template.
- Choose the appropriate value type for each field, such as string, number, boolean, array, or object.
- Optionally provide a template version; otherwise the latest version is used.
- Set Output to Binary File or URL, Metadata, and Binary File.
- Choose PNG, JPG, WebP, or PDF.
- Set Binary Property to the property expected by the next node, such as
data. - Connect the node to an email, Slack, cloud storage, or other file-capable node.
The official TypeScript client is a
git submodule under vendor/html-css-to-image-client. It is compiled into this
package, so the published community node has no runtime dependencies.
The n8n option fields are generated from the client request types and their JSDoc:
git submodule update --init --recursive
npm run generate:clientWhen an API parameter is added to the TypeScript client, update the submodule and run the generator. Primitive string, number, boolean, string-array, and string-union parameters are added to the n8n UI automatically. Complex client types need an n8n-specific UI adapter only when their editor representation requires one.
To update the client:
git submodule update --remote vendor/html-css-to-image-client
npm run generate:client
npm testnpm install
npm run lint
npm run build
npm test
npm run devThe version in package.json is the release switch. When a commit reaches
main, CI runs lint, build, and tests first. Only after CI succeeds does the
publish workflow check whether that exact version already exists on npm. If it
is new, the workflow publishes the exact tested commit through npm Trusted
Publishing and creates the matching Git tag automatically.
For a patch release:
npm version patch --no-git-tag-versionYou can also update the version directly in package.json and
package-lock.json. Update CHANGELOG.md, commit the version change, and push
main with GitHub Desktop. Do not create a tag or run npm publish locally.
Ordinary pushes that do not change the package version are skipped.