Event ticket images

Event ops does this per attendee tier. The event has a small set of tiers, General, Workshop, and Speaker, and each tier needs ticket artwork that looks related to the others. Color and included sessions change by tier. The ticket size does not.

This is tier artwork. You’re making the three faces, not a unique ticket for every attendee. Per-attendee unique codes are a different step, and only if whatever generates the codes writes them into data files first.

The job is one component with a named export per tier, plus one data file keyed by those names. One export writes the three ticket images. You don’t draw a General ticket, then clone it for Workshop, then hope the type still matches.

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

The component is .lerret/ops/ticket.jsx with named exports General, Workshop, and Speaker. Variants share the artboard’s meta.dimensions, which is what you want here: same ticket size, different tier face. The exports are the tiers. They stay visually related because they’re three exports of one component.

Data is a tier-keyed file with tier name, color, and included sessions. That’s bulk pattern 3: named-export variants plus per-variant keyed data in one data file. One --data pass feeds every named export in the run. Change a session list on Workshop and re-export. General and Speaker stay as they were unless their keys changed too.

The image is a PNG at the ticket size. The size is the ticket size you already print or display. This case is the tier artwork.

You use Lerret because three tiers stay visually related. They’re three exports of one component. The color and the session list are fields. They can’t drift from a leftover text layer on a copy of last year’s file. Three near-duplicate design files, or a screenshot of a styled HTML ticket, will drift.

npx @lerret/cli@latest export --data

Pass the tier-keyed data file. Start a project with npx create-lerret@latest. More in the use cases index.