09/13/2026
Every Check Passed but One
Every post on this site with a dark technical-schematic cover — eyebrow, title, subtitle, a small box-and-arrow diagram — has had that image drawn by the same small piece of code since this site's own backlog of covers got filled in. That code is now a free tool too: fill in three lines of text, place a few boxes, connect them with arrows, and download the result. No upload, no account, no build step.
It is a small tool, but getting it right took two passes, and the second bug is the more interesting one — not because it was hard to fix, but because of how long it took to notice.
What it actually is
One template, not an art request
The same layout this site uses for its own posts, generated from data instead of asked for from an image model one post at a time — so fifty-plus covers look like one family instead of fifty-plus separate guesses at a brief.
Three export formats
SVG for editing in Illustrator or Figma, WebP and PNG for dropping straight in as a cover image. All three come from the same layout data, so they always agree with each other.
Genuinely nothing leaves your browser
The drawing happens on a <canvas> element in your own tab. There is no server for it to call, and a build check fails if one ever gets added.
How it stays honest with the version that builds this site
This site's own covers are rendered at build time by a headless browser
(Puppeteer), for a reason covered in Measure It in a Real
Browser: an image library asked to
draw text in this site's typeface turned out to be silently ignoring
font-family altogether. A real browser does not have that problem,
because a real browser is the thing that renders fonts correctly to
begin with.
The public tool can't use Puppeteer — it runs in a visitor's own tab,
and nothing there can launch a second browser inside itself. So it uses
the visitor's browser directly: a <canvas> element, drawing with
whatever font the page already loaded.
That split — one renderer for the site's own build, one for a visitor's tab — is exactly the kind of thing that quietly drifts apart over time, one small layout tweak at a time, until the two no longer agree. So the box-and-arrow math (where a box sits on the grid, how an arrow bends to reach it) lives in exactly one place, and both renderers call it. A change to how arrows route happens once, for both.
The bug that a screenshot couldn't catch
Before this tool shipped, it went through the usual checks: the site built cleanly, an automated gate confirmed the tool never touches the network or writes to storage, and a real screenshot of it running got captured for its own listing card. All green.
What none of those checks did was download the file and open it.
The SVG export builds an XML string by hand, and one of the fonts in
it — a monospace fallback stack — was written with its own double quotes
inside: "Cascadia Mono". That string gets dropped straight into a
font-family="..." attribute, which is also wrapped in double quotes.
The embedded quote closed the attribute early, and everything after it
spilled out as bare, invalid text. Any exported file that reached a
monospace label — which is nearly all of them, since the eyebrow and
every box use it — came out broken:
This page contains the following errors:
error on line 1 at column 2137: Unexpected token inside opening tag: C
The canvas preview never showed a hint of it, because ctx.font
doesn't care what kind of quotes sit around a font name — only an XML
parser does. A build that succeeds, a gate that checks for the right
things, and a screenshot that shows the right pixels can all be
genuinely correct and still miss a bug that only exists in a file
nobody has opened yet. It surfaced only once it actually got used for
what it's for: downloading the file and opening it, exactly the way a
real visitor would.
The fix was one line — single quotes instead of double, matching how the other font in the file was already written — but the lesson is the slower part: a tool "working" and a tool's actual output being valid are two different claims, and only one of them was being checked.