Transactional email hero variants

A lifecycle marketer runs this once per email template. Welcome, receipt, password reset, and winback each need a hero image. The four should look like they came from the same system.

This is template work, done when the templates are set up and again if the heroes need a refresh. The filenames should match the template names so wiring them up is mechanical. You should not be renaming files by hand.

The job is four hero PNGs from one component. You export once. You get hero-welcome.png and the rest. You are not making four unrelated files that slowly stop matching.

Give Lerret a React component under .lerret/ and optional data. export writes a PNG per named export. Same component, variant data, many images. There is no batch product, no queue, no orchestrator.

The component is .lerret/email/hero.jsx with named exports Welcome, Receipt, PasswordReset, and Winback. Those four names are the four templates. The first file is hero-welcome.png. The others follow the same variant naming. Each named export is one template’s hero. The layout stays in the component. The variant is the export name.

The data is one file keyed by variant. That is bulk pattern 3: named-export variants plus per-variant keyed data in one data file. One export run writes all four. The key names match the named exports, so the receipt hero reads the receipt block.

The images are PNGs, one per template: hero-welcome.png and the rest. Four templates, one run, four files. Welcome, Receipt, PasswordReset, and Winback stay four exports of one file.

Four consistent heroes in one run, and the filenames match the template names so wiring them up is mechanical. The next template is another named export and another key in the same file.

One export writes hero-welcome.png and the rest from the named exports on .lerret/email/hero.jsx. The keyed data file supplies each variant. You do not pass a different --data per template. Pattern 3 does that in one run. Filenames match the template names, so wiring them up is mechanical.

npx @lerret/cli@latest export

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