Tool
OG image maker
Social cards from a query string. The endpoint is public and returns SVG; the designer behind it exports the same card as a PNG.
The endpoint
Everything is a parameter, and the output is a pure function of them:
GET /api/og?title=Hello&subtitle=World&eyebrow=case+study&theme=dark| Parameter | Notes |
|---|---|
title | Required. Shrinks from 66px until it fits three lines. |
subtitle | Up to two lines, then ellipsised. |
eyebrow | Small mono line above the title. Uppercased. |
footer | Defaults to tesseract.page. |
theme | dark, indigo or mono. |
mark=0 | Drops the cube and wordmark. |
Live, from this page:
SVG, and what that costs
The card is drawn as SVG rather than rasterised on the server. That keeps the Worker free of a wasm rasteriser and a bundled font — the endpoint answers in single-digit milliseconds and costs nothing to keep around.
The trade is that crawlers will not accept an SVG as anog:image. So use the URL wherever an <img>will do — a README, a docs page, this site — and download the PNG for the meta tag. The designer rasterises it in the browser at 1× or 2×.
Fonts
The card asks for the system UI sans and the system mono. It embeds no font files, so a card rendered on macOS and the same card on Linux differ slightly in their letterforms. Line breaks do not move: wrapping is computed from a width table, not from whatever font happens to be installed.
The designer is part of the admin panel. The endpoint above is public and needs no key.