Event / webinar promo card

Marketing starts the promo about two weeks before each event. Title, date and time, speaker names, a registration line. Speaker lists change up to the last minute. The card has to change with them, including at 11pm the night before.

This is event work on a short clock. The title and the time are usually stable. The speakers are not. You need a way to edit an array and get both sizes again without re-laying-out a design file after hours.

The job is two images for one event: a 1200×630 card and a 1080×1350 portrait artboard for feed posts. One data file feeds both. When a speaker drops or is added, you edit the speakers array and export again. The two sizes stay in agreement because they read the same { title, when, speakers, cta }.

Give Lerret a React component under .lerret/ and optional data. export writes a PNG. Same fields, two artboards, two images. There is no batch product, no queue, no orchestrator.

The component is .lerret/social/event-promo.jsx. It draws the title, the date and time, the speaker names, and the registration line. Two artboards, two sizes, one set of fields. The speaker names come from the array. The registration line is the cta field. Dimensions are per-asset, so the feed portrait is not a crop of the 1200×630 card.

Data is { title, when, speakers: [], cta }. One data file per event. That is the first of the four bulk patterns: re-run export with a different --data file, one file per event. The speaker list is an array. Last-minute changes are array edits.

The images are a PNG at 1200×630 and a 1080×1350 portrait artboard for feed posts.

You use Lerret because speaker lists change up to the last minute. Editing a JSON array and re-running beats re-laying-out a design at 11pm. A design file with two frames will get one frame updated and the other left on the old list. Screenshots of the registration page will not give you both sizes clean.

npx @lerret/cli@latest export

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