Build Bannerbear

YESreplaces $49/mosaves $588/yrback to the verdict

0%0 of 18 items done

Saved on this device only. Tick prerequisites first, then work the phases in order · do not start one until the checks above it pass.

An image generation API you host: templates as code, satori and resvg render them to PNG on demand behind signed URLs with a cache, in the same way this site renders 1,100 OG images for free.

estimated effort one sittingthe files for this build are in the project pack

Renderingsatori to SVG, @resvg/resvg-js to PNG, sharp to resizeRuntimeNode 22, node:http

Before step 1

Everything below is assumed from the first step. Tick each one when you actually have it, not when you plan to.

installfree
Why Everything in this build runs on it: the server, the scripts, the tests.
Get it Download the LTS installer from nodejs.org, or install with your package manager (brew install node, or nvm install 22). Restart the terminal afterwards. open ↗
Verify node --version prints v22 or higher
installfree
Why Every step below is a command you type or a file you edit.
Get it VS Code (code.visualstudio.com), Cursor or Zed. Open a folder for the project and use the editor's built-in terminal. open ↗
Verify You can open a folder and run a command in its terminal
installfree
Why History for your code, and the way most hosts deploy.
Get it Install from git-scm.com or with your package manager, then run git init in the project folder once it exists. open ↗
Verify git --version prints a version
have readyfree
Why satori needs font files, not CSS font names.
Get it Download from Google Fonts or Fontsource; commit them to the repo. open ↗
decidefree
Why So nobody renders arbitrary text on your domain.
Get it openssl rand -hex 32 into .env as SIGN_KEY.
accountabout $5 a month
Why This needs one process running all the time with a public address.
Get it Hetzner Cloud (from about 4 EUR), DigitalOcean or Fly.io. Ubuntu 24.04, the smallest size. You need SSH access and a public IP. Only needed for the deploy phase; develop locally first. open ↗
accountroughly $10 a year, or free on an existing domain
Why A public address you own, so links you share never break when a provider changes.
Get it Register at Cloudflare Registrar, Porkbun or Namecheap, or use a subdomain of one you already own. You add one DNS record in the deploy phase. open ↗
installfree
Why Automatic HTTPS in front of the Node process. Without TLS the browser features this relies on (and your visitors' trust) do not work.
Get it On the VPS: follow the install steps at caddyserver.com/docs/install for Ubuntu. One Caddyfile with your domain and a reverse_proxy line is the whole config. open ↗
Verify caddy version prints a version on the server

Data model

Create these before the first phase that stores anything. Changing a table later is the expensive kind of change.

- templates/<name>.mjs exporting a function from params to a satori element tree, plus width, height and the fonts it needs.
- renders/: cached PNGs named by a hash of template name and params.

Environment variables

These go in a .env file the app reads at startup. The pack's .env.example is this table as a file · copy it, never commit the filled-in version.

Variable	Needed	Example	Where the value comes from
`PORT`	required	`3000`	Any free port.
`SIGN_KEY`secret	required	`hex`	openssl rand -hex 32.
`CACHE_DIR`	required	`./renders`	Where PNGs are cached.
`CACHE_MAX_MB`	optional	`500`	Cache size cap.

The build, in order

1
Render one template
A crisp 1200x630 PNG from a satori tree.
1. terminal
  mkdir imggen && cd imggen && git init && npm init -y && npm pkg set type=module && npm install satori@0.29.0 @resvg/resvg-js@2.6.2 sharp@0.35.3 mkdir -p templates renders fonts && cp .env.example .env
done when · tick each as it passes
next phase
2
The endpoint
GET /img/:template with validated params, timeout and cache.
done when · tick each as it passes
next phase
3
Signed URLs
Only URLs you generated render.
done when · tick each as it passes
next phase
4
More templates and formats
Three more templates, JPEG and WebP, a size parameter.
done when · tick each as it passes
next phase
5
Operate
Eviction, healthz, service, authoring guide.
2. Files README.md
done when · tick each as it passes
next phase
6
Operate it like a productproduct builder
Only for the product-builder path: know when the renderer is down, never lose the database, and keep the server patched.
1. Answer 200 with the build id and a quick database read. Point a free uptime monitor (or your own, from the Healthchecks entry on this site) at it so an outage is noticed before a user notices.
2. One JSON line per request: method, path, status, duration, no raw IPs. Rotate weekly with logrotate, keep eight.
3. SQLite's .backup command makes a consistent copy while the app runs. Copy it to object storage or a second machine; then, once, restore it into a fresh checkout and confirm the app reads it.
  terminal
  sqlite3 data/app.db ".backup '/tmp/app-$(date +%F).db'" rclone copy /tmp/app-$(date +%F).db remote:backups/
4. Firewall allowing only 22, 80 and 443; unattended security updates on; the app running as an unprivileged user under systemd with Restart=on-failure.
done when · tick each as it passes

what this build does not replace

Video, the visual editor, the integrations.
the visual template editor
video and GIF rendering
Zapier, Make and Airtable integrations
CDN hosting of the results

after v1, if you want it

A preview page per template with a form
Batch rendering from CSV

Need the files? The project pack on the verdict page hands your agent the whole brief · more og images.