Why I built it
Every article needs a share card — the banner that shows up when a link gets posted to Twitter or Slack. Designing one by hand per post is tedious, and the hosted services that do it felt like overkill. I wanted a tiny endpoint I could point an <img> at and get a finished 1200×630 PNG back, no design tool in the loop.
How it works
Preview is a small Express server with a single workhorse route: GET /get. You pass it heading, sub_heading, author, a theme, and either explicit width/height or a named breakpoint — it draws the image and streams it straight back as image/png.
The interesting choice is that there's no headless browser. Instead of spinning up Chromium to screenshot an HTML template, it draws directly onto a node-canvas surface: a diagonal linear gradient for the background, then three lines of left-aligned text stacked around the vertical centre. That keeps it fast and cheap to host — the whole thing ran happily on a free Heroku dyno.
What's interesting
- Themes are just data — each theme is a pair of gradient stops plus a font stack (
Blackberry,PinkyPurple,orangeFun). Adding one is a few lines in a constants file. - Named breakpoints map friendly sizes to dimensions, so
breakpoint=xlresolves to the canonical 1200×630 OG size without you remembering the numbers. - CORS is open by design — the endpoint is meant to be embedded cross-origin as an image
src, so any site can drop in a generated card. - A live playground at
/renders the available themes and breakpoints so you can tweak parameters and see the output before wiring up the URL.
Where it stands
Open source on GitHub, built in 2022 as an exercise in server-side image generation with raw canvas drawing rather than the screenshot-a-webpage approach. The Heroku demo is gone with the free tier, but the generator itself is a handful of dependency-light files — clone, npm start, and the endpoint is yours.