html2img — HTML a imagen

html2img es una API que convierte un diseño en HTML en una imagen (PNG o JPEG). Le mandas tu diseño y te devuelve la imagen, lista para guardar, enviar o publicar. Perfecta para generar imágenes automáticamente (posts para redes, miniaturas, Open Graph, recibos o certificados) desde n8n, Make o Zapier, sin montar servidores.

Pruébalo en 10 segundos

Cambia los textos y pulsa Generar: esto es justo lo que tu automatización recibiría como imagen. Sin tarjeta y sin programar.

Tarjeta para redes
Ejemplo de imagen generada
Recibo / ticket
Ejemplo de recibo generado

Plantillas listas para usar

¿No quieres hacer el diseño desde cero? Tenemos una galería de plantillas (tarjetas para redes, facturas, certificados, miniaturas…) que copias con un clic y pegas directamente en tu flujo. La vamos ampliando.

Ver las plantillas

Cómo funciona

Esta herramienta convierte un diseño en HTML (texto con el aspecto que quieres) en una imagen (PNG o JPEG). Tú le mandas el diseño y te devuelve la imagen, lista para guardar, enviar por email o publicar en redes.

Está pensada para usarla desde plataformas no-code como n8n, Make o Zapier, sin programar. Ideal para crear imágenes automáticamente: posts para redes, miniaturas, recibos, certificados, etc.

Lo único que necesitas

  • Tu API key (tu “contraseña” para la herramienta). La creas en tu panel con “+ Crear llave”. Se muestra una sola vez, así que cópiala y guárdala.
  • En tu plataforma de automatización, un paso de tipo “HTTP Request” / “Hacer una petición HTTP” (lo tienen n8n, Make, Zapier, Pipedream…).

Cómo usarlo en n8n (paso a paso)

Le envías tu HTML tal cual y te devuelve la imagen directamente, lista para usar. Sin pasos de conversión. En el nodo HTTP Request:

  • Method: POST
  • URL: https://api.cofferdock.com/capture
  • Send Query Parameters: actívalo y añade el tamaño en campos separados (cómodo, sin tocar el enlace): width = 1200, height = 630. (Puedes añadir más: format, full_page… ver la tabla de abajo.)
  • Send Headers: actívalo y añade dos: x-api-key = tu llave, y Content-Type = text/html
  • Send Body: actívalo → Body Content Type: Raw → en Body pega tu HTML (o conéctalo desde un paso anterior)
  • En Options → Response → Response Format: elige File

La salida del nodo ya es la imagen como archivo: conéctala directamente a Drive, email, Telegram, redes… Un solo nodo y listo.

En Make (módulo HTTP → Make a request): mismo método y URL, en Query String añade width y height, en Headers las dos cabeceras, Body type: Raw, Content type: text/html y pega tu HTML en Request content. La respuesta ya es el archivo de imagen.

En resumen: POST a …/capture, width y height como Query Parameters, las cabeceras x-api-key y Content-Type: text/html, el HTML en Body en modo Raw y Response Format en File.

Opciones (en Query Parameters)

Opciones que puedes añadir como Query Parameters (campos name/value en n8n/Make):

OpciónPor defectoPara qué sirve
width1200Ancho de la imagen en píxeles.
height630Alto de la imagen en píxeles.
formatpngFormato: png o jpeg.
full_pagefalseSi tu diseño es más largo que el alto, ponlo en true para capturarlo entero.
wait_ms0Esperar unos milisegundos antes de la foto (por si algo tarda en cargar). Máx. 5000.

Imágenes y fuentes de internet: puedes usar fotos de fondo, logos o tipografías alojadas en internet poniendo su enlace (https://…) dentro del HTML/CSS, y se cargarán en la imagen final. El diseño se renderiza sin ejecutar JavaScript, así que usa HTML y CSS (no scripts).

Lo que recibes

La imagen directamente (un archivo PNG o JPEG), lista para guardar, enviar por email o publicar. No hay que convertir nada: el paso siguiente de tu automatización ya recibe el archivo. (En el modo técnico con JSON, la imagen llega en base64.)

Si en un pico recibes “ocupado”

En momentos de mucha demanda, la API puede responder “ocupado” (código 503) y pedirte que esperes unos segundos. Es raro y puntual, pero para que tu automatización lo resuelva sola, activa el reintento en el paso de la petición:

  • En n8n: en el nodo HTTP Request, pestaña Settings, activa “Retry On Fail”. Con 2–3 intentos sobra.
  • En Make: añade un manejador de errores al módulo (clic derecho → Add error handler) con la directiva Break, que reintenta automáticamente.

Nuestra respuesta incluye la cabecera Retry-After con los segundos que conviene esperar. Con el reintento activado, tu flujo ni se entera.

html2img — HTML to image

html2img is an API that turns an HTML design into an image (PNG or JPEG). You send your design and get the image back, ready to save, send or publish. Great for generating images automatically (social posts, thumbnails, Open Graph, receipts or certificates) from n8n, Make or Zapier, with no servers to maintain.

Try it in 10 seconds

Change the text and hit Generate: this is exactly what your automation would receive as an image. No card, no coding.

Social card
Example generated image
Receipt / ticket
Example generated receipt

Ready-to-use templates

Don't want to design from scratch? We have a gallery of templates (social cards, invoices, certificates, thumbnails…) you can copy with one click and paste straight into your flow. We keep adding more.

See the templates

How it works

This tool turns an HTML design (text describing how it should look) into an image (PNG or JPEG). You send the design and it returns the image, ready to save, email or post on social media.

It's made to be used from no-code platforms like n8n, Make or Zapier, without coding. Great for generating images automatically: social posts, thumbnails, receipts, certificates, etc.

All you need

  • Your API key (your “password” for the tool). Create it in your dashboard with “+ Create key”. It's shown only once, so copy and save it.
  • In your automation platform, an “HTTP Request” step (n8n, Make, Zapier, Pipedream… all have one).

How to use it in n8n (step by step)

You send your HTML as is and you get the image back directly, ready to use. No conversion steps. In the HTTP Request node:

  • Method: POST
  • URL: https://api.cofferdock.com/capture
  • Send Query Parameters: on, and add the size as separate fields (handy, no editing the URL): width = 1200, height = 630. (You can add more: format, full_page… see the table below.)
  • Send Headers: on → add two: x-api-key = your key, and Content-Type = text/html
  • Send Body: on → Body Content Type: Raw → paste your HTML in Body (or connect it from a previous step)
  • Under Options → Response → Response Format: choose File

The node's output is already the image as a file: connect it straight to Drive, email, Telegram, social… One node and done.

In Make (HTTP → Make a request module): same method and URL, in Query String add width and height, in Headers the two headers, Body type: Raw, Content type: text/html, and paste your HTML into Request content. The response is already the image file.

In short: POST to …/capture, width and height as Query Parameters, the x-api-key and Content-Type: text/html headers, your HTML in Body as Raw, and Response Format as File.

Options (as Query Parameters)

Options you can add as Query Parameters (name/value fields in n8n/Make):

OptionDefaultWhat it does
width1200Image width in pixels.
height630Image height in pixels.
formatpngFormat: png or jpeg.
full_pagefalseIf your design is taller than the height, set it to true to capture all of it.
wait_ms0Wait a few milliseconds before the snapshot (in case something is still loading). Max 5000.

Internet images and fonts: you can use background photos, logos or fonts hosted online by putting their link (https://…) inside the HTML/CSS, and they'll load into the final image. The design is rendered without running JavaScript, so use HTML and CSS (no scripts).

What you get back

The image itself (a PNG or JPEG file), ready to save, email or publish. Nothing to convert: the next step of your automation already receives the file. (In technical mode with JSON, the image comes in base64.)

If you get “busy” during a spike

At peak times, the API may reply “busy” (status 503) and ask you to wait a few seconds. It's rare and brief, but to let your automation handle it on its own, turn on retry on the request step:

  • In n8n: on the HTTP Request node, Settings tab, turn on “Retry On Fail”. 2–3 attempts is plenty.
  • In Make: add an error handler to the module (right-click → Add error handler) with the Break directive, which retries automatically.

Our response includes a Retry-After header telling how many seconds to wait. With retry on, your flow won't even notice.