Free and open source · MIT Star on GitHub
Lerret
Start a project

Use cases

83 images you can make in one day

Give Lerret a React component under .lerret/ and optional data. export writes a PNG or JPEG. Same component, data swapped (including bulk), many images. MIT, 0.1.x. The list is stills from local files.

The command

npx @lerret/cli@latest export [path] [--format png|jpg] [--out dir] [--flat] [--data path] [--config path]

--data and --config apply to every artboard in the run and are never written back into .lerret/.

The four bulk patterns

Every "many images" case below is one of these. There is no batch product, no queue, no orchestrator.

  1. 1 Re-run export with a different --data file each time. Same components, new values, new images.
  2. 2 Put many artboards in a page or group, each with its own colocated .data.json / .data.js. One export captures them all.
  3. 3 Named-export variants plus per-variant keyed data in one data file.
  4. 4 --config to swap theme vars (light/dark, brand palette) without touching the source.

Contents

Social / OG

UC-01–12

  1. 01 UC-01

    Blog post OG image

    Who / when
    Content writer, every time a post is published.
    Component
    .lerret/social/blog-og.jsx (title, kicker, author name and role, site wordmark on a brand background)
    Data
    { title, kicker, author, role, date }. One --data posts/2026-08-19-shipping-fast.json per post. Re-run the command for each post.
    Image out
    PNG 1200×630
    Why Lerret
    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.
  2. 02 UC-02

    Docs page OG images in bulk

    Who / when
    Docs maintainer, once per docs release.
    Component
    .lerret/social/docs-og.tsx (section breadcrumb, page title, small doc-type chip)
    Data
    One artboard per docs section under .lerret/social/docs/, each with a colocated .data.json holding { section, title, kind }.
    Image out
    PNG 1200×630, nested output folders mirroring the docs tree
    Why Lerret
    Fifty cards from one command. Adding a docs page means adding a data file.
  3. 03 UC-03

    X / Twitter card variants for one announcement

    Who / when
    Founder, on announcement day.
    Component
    .lerret/social/tweet-card.jsx with named exports Default , Quiet , Bold
    Data
    One data file keyed by variant name. Each variant gets its own headline weight and accent.
    Image out
    PNG 1200×675. Files tweet-card.png, tweet-card-quiet.png, tweet-card-bold.png
    Why Lerret
    Three real options in one run, pixel-identical to last time except the fields that changed. A screenshot of a browser tab cannot give you a clean 1200×675 with embedded fonts.
  4. 04 UC-04

    LinkedIn announcement card

    Who / when
    Whoever posts company news, ad hoc.
    Component
    .lerret/social/linkedin-announcement.jsx (headline, one-line subhead, logo lockup, muted background pattern)
    Data
    { headline, subhead, tag } via --data. Same component reused for funding, partnership, hire, milestone.
    Image out
    PNG 1200×627 (matches the shipped linkedin-announcement example)
    Why Lerret
    One component, four announcement types. Text length variation is handled by CSS the way the real site handles it.
  5. 05 UC-05

    Instagram square milestone post

    Who / when
    Marketing, whenever a round number lands.
    Component
    .lerret/social/stars-milestone.jsx (big number, label, repo name, sparkle framing)
    Data
    { number, label, repo }, swapped every time the milestone changes (1k, 2k, 5k stars).
    Image out
    PNG 1080×1080 (as in the shipped stars-milestone example)
    Why Lerret
    The number is a prop. Next milestone is a one-field edit and a re-run.
  6. 06 UC-06

    Instagram story

    Who / when
    Social, alongside any square post.
    Component
    .lerret/social/story.jsx (vertical layout, large type, bottom-safe area kept clear for platform UI)
    Data
    Same fields as the square post. A second artboard reading the same colocated data shape.
    Image out
    PNG 1080×1920
    Why Lerret
    Story and square are separate artboards because dimensions are per-asset, so each gets a layout that suits its aspect ratio.
  7. 07 UC-07

    Social profile / banner set from the `social-media` preset

    Who / when
    Anyone setting up or refreshing a brand's profiles.
    Component
    The social-media preset's page: Twitter banner, X profile, LinkedIn cover, IG square, IG story, Bluesky banner, each its own .jsx with its own meta.dimensions
    Data
    Shared brand fields (name, tagline, handle, accent) via one --data brand.json applied across the run.
    Image out
    PNGs at each platform's native size, nested by group
    Why Lerret
    Six platform sizes stay in sync from one set of fields. Change the tagline once and re-export.
  8. 08 UC-08

    Bluesky banner refresh

    Who / when
    Same person as UC-07, but on its own cadence.
    Component
    .lerret/social/bluesky-banner.jsx (wordmark, one line, edge-to-edge gradient)
    Data
    { line } only. Refreshed weekly with a new one-liner via --data.
    Image out
    PNG at the preset's banner dimensions
    Why Lerret
    A weekly text swap costs one command. Reopening a design file weekly is how someone forgets the font.
  9. 09 UC-09

    Quote card series from one interview

    Who / when
    Content, after a podcast or interview.
    Component
    .lerret/social/quote-card.jsx (pull quote, attribution, small portrait slot)
    Data
    Six artboards in .lerret/social/quotes/, each with a colocated .data.json containing one quote.
    Image out
    PNG 1080×1080, one per quote, in one export
    Why Lerret
    Six cards, one command, identical typography. Adding a seventh quote is adding a JSON file.
  10. 10 UC-10

    Weekly changelog social card

    Who / when
    Whoever runs the weekly ship post.
    Component
    .lerret/social/release-card.jsx (version, three bullet lines, date stripe)
    Data
    { version, date, bullets: [] } from a fresh --data file each week.
    Image out
    PNG 1200×630
    Why Lerret
    The bullets are an array the component maps over. Three bullets or five, the layout handles it.
  11. 11 UC-11

    Event / webinar promo card

    Who / when
    Marketing, ~2 weeks before each event.
    Component
    .lerret/social/event-promo.jsx (title, date/time, speaker names, registration line)
    Data
    { title, when, speakers: [], cta }. One data file per event.
    Image out
    PNG 1200×630 and a 1080×1350 portrait artboard for feed posts
    Why Lerret
    Speaker lists change up to the last minute. Editing a JSON array and re-running beats re-laying-out a design at 11pm.
  12. 12 UC-12

    "We're at booth N" conference card

    Who / when
    Field marketing, per conference.
    Component
    .lerret/social/conference-presence.jsx (event logo slot, booth number, dates, team photo slot)
    Data
    { event, booth, dates } swapped per conference via --data.
    Image out
    PNG 1200×630
    Why Lerret
    Five conferences a year, one component, five data files that live in git next to the campaign notes.

This page is stills and local data files. No pipeline, no dashboard. 

npx create-lerret@latest