Code snippet card for social

DevRel needs this when a snippet is worth posting. The card has to look like every other snippet card: window chrome, mono type, a filename tab, syntax-styled lines. The snippet itself has to stay text in git, not pixels in a screenshot tool. The mono font has to be the one in _fonts/.

This happens when a snippet is worth posting, not once when the card chrome is first drawn. The person doing it already has the lines. They should not screenshot an editor and crop.

The job is one 1200×675 PNG per snippet. You fill { filename, lines: [] }, you pass it with --data, you export. The next snippet is a new file and the same command. The framing does not change. The values do.

Give Lerret a React component under .lerret/ and optional data. export writes a PNG. Same card, new snippet, next image.

The component is .lerret/docs/code-card.jsx. It draws window chrome, mono type, a filename tab, and syntax-styled lines. The filename is a field. The lines are an array. The mono font is embedded from _fonts/ at export, so what you post is the font you committed.

Data is { filename, lines: [] } per snippet via --data. This is the first of the four bulk patterns: re-run export with a different --data file. Same component, new values, new image. --data applies to every artboard in the run and is never written back into .lerret/. The snippet stays text you can diff. There is no batch product, no queue, no orchestrator.

The image is a PNG at 1200×675. The filename tab and the lines both come from the data file. The next snippet is another --data run over the same artboard. The chrome stays the same.

Consistent framing every time, embedded mono font from _fonts/, and the snippet is text in git rather than pixels in a screenshot tool. A design-file card will pick up whatever mono that file last used. You use Lerret because the card is the framing plus the text, and the text is in git.

The framing is window chrome, mono type, a filename tab, and syntax-styled lines. The snippet is text in git rather than pixels in a screenshot tool.

npx @lerret/cli@latest export --data

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