API endpoint reference cards

DevRel needs this per endpoint, for a docs sidebar or a social series. Each card shows a method chip, the path, a one-line description, and an auth badge. The method and the path are fields. POST cannot accidentally render in the GET color, because the color comes from the method field.

This happens per endpoint, and again when a path or a method changes. The person doing it already owns the endpoint list. They should not paint POST by hand on a card that still says GET in the text.

The job is one 1200×630 PNG per endpoint. You can keep a single data file listing endpoints and run export once per endpoint with --data, or give each endpoint its own artboard with colocated data. Same component either way. The next endpoint is another file or another artboard.

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

The component is .lerret/docs/endpoint-card.jsx. It draws the method chip, the path, the one-line description, and the auth badge. The chip reads the method. The path is a field. The description is a field. The badge is a field.

Data can be a single file listing endpoints, one export run per endpoint via --data (bulk pattern 1: re-run with a different --data file), or one artboard per endpoint with colocated data (bulk pattern 2: many artboards with colocated .data.json / .data.js). Both are the same component and the same fields. --data applies to every artboard in the run and is never written back into .lerret/. There is no batch product, no queue, no orchestrator.

The image is a PNG at 1200×630. Method chip, path, one-line description, and auth badge are the four fields. The chip color follows the method field, so POST and GET cannot share a color by accident.

The method and path are fields, so POST never accidentally renders in the GET color. A design-file card per endpoint will keep an old method color until someone opens that frame. You use Lerret because the chip is the field, and the field is the method.

The card can sit in a docs sidebar or a social series. The method chip, path, one-line description, and auth badge are the fields.

npx @lerret/cli@latest export --data

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