Blog post OG image

A content writer needs a share card every time a post is published. This happens on publish day, not once when the brand kit is first drawn. The post is already in the repo. The card has to look like the site, including the header type, and it has to exist before anyone pastes the URL into a chat or a browser.

The person doing this is the writer, or whoever hits publish. They should not wait on a design pass for a title that already lives with the post. They should not crop the live header and hope the next post crops the same way.

The job is one Open Graph image for that post. You put the title, the kicker, the author, their role, and the date into a small file. You run export. You get a PNG. You ship the post with that card. The next post uses the same component and a new data file. Nothing about the artboard changes between posts. The values do.

Give Lerret a React component under .lerret/ and optional data. export writes a PNG. Same component, data swapped, next image.

The component is .lerret/social/blog-og.jsx. It draws the title, the kicker, the author name and role, and the site wordmark on a brand background. It is React, the same React the site header uses, and it uses the same fonts. The file lives under .lerret/ in the repo, next to the post it belongs to. You do not keep a second place for type that already exists in code.

Data is { title, kicker, author, role, date }. One --data file per post. The catalog example is posts/2026-08-19-shipping-fast.json. That filename is the post. The fields are the card. This is the first of the four bulk patterns: re-run export with a different --data file each time. Same components, new values, new images. There is no batch product, no queue, no orchestrator. You run the command again with the next post’s file. --data applies to every artboard in the run and is never written back into .lerret/.

The image is a PNG at 1200×630.

A design file would be a second place to keep the type, and a second place to get it wrong. A screenshot of the live header is the wrong size and the wrong crop, and it will not match the last post’s card unless someone lines it up by hand. You use Lerret because the card is the same React and the same fonts as the site header, and the component lives in the repo next to the post. There is no designer round-trip per post. You are not exporting from a design file and hoping the type did not reflow.

npx @lerret/cli@latest export --data posts/2026-08-19-shipping-fast.json

Start a project with npx create-lerret@latest. More in the use cases index.