Event Badge

Event Badge

A batch-generated conference/event attendee name badge, one PNG per row straight from a roster CSV - attendee name, organization, a tier/role, and a QR code, on a clean modern layout available in either orientation on the same standard 4x3in badge stock.

What's included

• A Badge Orientation dropdown (Landscape/Portrait) - same physical card size either way (101.6mm x 76.2mm), just held the other way, with two full layout partials so elements reflow properly rather than just rotating in place
• A curved navy/cyan header band and a computed 16-point starburst tier emblem - both real vector SVG artwork, not raster images
• A dropdown tier (Attendee/Speaker/VIP/Staff) and a QR code (scanCode block) driven by a plain text field
• roster.csv - a ready-to-run sample batch input (see below); a portrait preset to preview the other orientation without re-filling the form

Examples for Authors

• CSV batch generation to PNG - this project's whole point: run roster.csv (columns: attendee_name, organization, tier, qr_data - matching form.json's own field ids) through the Batch menu item or --batch --output-type png to generate one badge PNG per row, with default supplying the event-level fields the CSV doesn't drive (event name, date, orientation).
• Two layout partials picked by process.js, not one conditioned by per-block conditions - overlay_landscape.json/overlay_portrait.json differ enough (the tier badge and QR code sit side-by-side in the wider Landscape layout but stacked in Portrait's taller, narrower one) that reflowing the same blocks conditionally would be more contorted than just authoring two versions; process.js picks the page size and the overlay filename together off one orientation == "Portrait" check.
• A layout graphic + an embellishment, both hand-authored SVG - header_banner.svg (a curved/wavy shape behind the event name, built from path curves) and tier_accent.svg (a 16-point rosette with genuinely computed - not eyeballed - point coordinates), both reusing the same navy/cyan palette as the rest of the layout; the same header_banner.svg is reused in both orientations at a different aspect ratio via fit: "cover", no second asset needed.
• Reformatting an engine-side date - process.js reformats event_date with formatDate() before overlay() reads it (QuickJS has no Intl.*, so toLocaleDateString()'s locale/options are silently ignored, not applied - formatDate() is the portable, reliable alternative every date-bearing project in this library uses).

Customizing

Swap the tier dropdown's options and tier_accent.svg's color to match your own event's branding, or recolor header_banner.svg entirely for a different palette. Add your own event logo via the optional field.