Images for n8n templates and tutorials

The picture is the product page

Somebody browsing templates makes a judgement in about two seconds, from the image alone: is this a real build or three nodes and a prayer, and does it look like it was made by someone who cares. Both questions are answered by the diagram, and neither is answered by a screenshot of a zoomed-out canvas with a browser tab bar across the top.

This is also why a consistent style matters more here than anywhere else. Ten listings that share a background, an icon pack and a frame read as a catalogue. Ten screenshots taken on different days read as a folder.

Lock a house style once

Set it by eye in the editor until it looks right, then keep the option names — the API takes exactly the same ones, so your style becomes a snippet you paste into every render:

{
  "background": "midnight",
  "iconPack":   "n8n",
  "nodeDetail": "standard",
  "frame":      "og",
  "scale":      2,
  "showTitle":  true
}

• Icon pack. n8n uses the real node icons, which buyers recognise instantly — usually the right choice for a listing. custom is the cleaner, more uniform look, better when the diagram sits inside your own branding.
• Frame. og for link previews and marketplace headers, youtube for video thumbnails, square for Instagram and most template grids, auto when the diagram stands alone.
• Background. Dark reads as technical and hides JPEG artefacts; white and paper suit a light marketplace theme. Pick one and never change it.
• Node detail. standard for most, minimal once a flow passes roughly 30 nodes and the labels start colliding at thumbnail size.

Rendering a library in one pass

If you keep your templates as JSON files, the whole catalogue is a loop. Same options every time, so every listing matches:

# style.json holds the options above — one file, every listing
for f in templates/*.json; do
  npx pixtex render "$f" --options style.json \
    -o "images/$(basename "${f%.json}").png"
done

pixtex render --help lists every option as a flag if you would rather pass them inline than keep a file.

Revised a template? Re-run the one file. If the image is embedded somewhere you do not control — a marketplace listing, a Notion page, someone else's round-up post — host it instead and re-render the same URL in place, which is the hosted-image pattern.

For tutorials and course material

• Show the finished flow first. One overview image at the top of the article tells the reader what they are building before the first instruction. It also becomes the social card.
• Build it up in stages. Render the same workflow after each section, with the new connections highlighted and the earlier ones dimmed. The layout stays put, so the reader watches one diagram grow instead of comparing five.
• Label the connections. A wire labelled only if in stock teaches the logic in a way a node name cannot.
• Export at 3× for video. Screen recordings scale and re-compress; the extra resolution is what survives it.