Annotated UI walkthrough steps

A tech writer does this per tutorial. Each step has to show the real UI plus numbered callout pins. The pins have positions and text. When the UI changes, the walkthrough images have to change with it. Screenshotted walkthroughs rot within a release.

This happens per tutorial, and again when the UI moves. The person doing it already owns the steps. They should not trace a screenshot and drop numbers on it by hand.

The job is one PNG per step, nested by tutorial folder. You keep one callout component and one artboard per step. Each artboard has colocated { step, pins: [{x, y, text}] }. One export writes the tutorial. The next tutorial is another folder of artboards.

Give Lerret a React component under .lerret/ and optional data. export writes a PNG. Same callout component, colocated data, many images.

The component is .lerret/docs/step-callout.jsx. It draws the real UI component plus numbered callout pins. The UI is the product UI. The pins are data. The pins sit on the same React the user will see.

Data is one artboard per step with colocated { step, pins: [{x, y, text}] }. This is the second of the four bulk patterns: many artboards with colocated .data.json / .data.js. One export captures them all. Output is nested by tutorial folder, so two tutorials do not land in one pile. There is no batch product, no queue, no orchestrator.

The images are PNGs, one per step, nested by tutorial folder. Each pin is {x, y, text}. The step number is a field. When a control moves, you edit the pin and re-export that tutorial folder.

When the UI changes, the walkthrough images regenerate with it. Screenshotted walkthroughs rot within a release. A design file of annotated frames will keep last release’s UI until someone restrokes the pins. You use Lerret because the walkthrough is the real UI plus pin data, and a re-run is how it stays current.

When the UI changes, the walkthrough images regenerate with it. Screenshotted walkthroughs rot within a release. Each pin is {x, y, text} on the real UI component. The PNGs nest by tutorial folder.

npx @lerret/cli@latest export

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