One social card, nine languages

A localization owner runs this on any global campaign. The card is one card: headline, subhead, CTA. The words exist in nine languages. Each language needs its own image, at the same size, from the same component.

This is campaign work. The translator should edit JSON, not a design file, and should never need the design tool at all. Length will differ by language. The layout has to absorb that.

The job is nine PNGs of the same campaign card. Each run points --data at one locale file and --out at that locale’s folder. The keys stay the same across files. The values are the translation. You do not restyle the card per language.

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/social/campaign-card.jsx. It draws a headline, a subhead, and a CTA. One component. The nine images are nine data files over that file. Direction, type, and spacing are CSS in the component.

The data files are locales/en.json, locales/fr.json, and the rest, each with the same keys. One export run per locale, each with its own --out. That is bulk pattern 1: re-run export with a different --data file each time. Same components, new values, new images. --data applies to every artboard in the run and is never written back into .lerret/. Nine locales is nine commands.

The image is a PNG 1200×630, nine times.

The translator edits JSON, not a design file. The layout absorbs length differences because it is real CSS. You do not nudge a text box per language. You drop in the next locale file, point --out at that locale’s folder, and re-run.

Point --data at locales/en.json first, and --out at that locale’s folder. Then locales/fr.json and its --out, and the rest. Nine locales is nine commands over the same .lerret/social/campaign-card.jsx. --data is never written back into .lerret/.

npx @lerret/cli@latest export --data locales/en.json --out

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