recadro

App Store screenshots, as code.

Turn the screens you've captured into your listing's story. Lay them out in HTML and CSS, and one command renders every one at Apple's exact pixels, for every device and language.

Start from the overlay starter:

npm install -D recadro
npx recadro init store/screenshots \
  --starter overlay \
  --captures path/to/captures
npx recadro dev

Free for any app. Node 20.11 or later.

Each starter is a set of panels in a different look. Pick one — or .

    Your screenshots stay in this browser. Nothing is uploaded.

    The real lineup, running the overlay starter on sample screens. Switch its store to light, or click a panel.Tap a panel to see it alone.

    Your layout is your HTML.

    A panel is a plain HTML page that you or your coding agent edit freely, and npx recadro dev shows each change as soon as it's saved.

    Its words sit apart, in strings/: one file per language, so another locale is one more file. recadro picks it up by its name and renders every panel in that language.

    The layout and its strings live in your repo like any other code: reviewed, diffed, reverted.

    panels/01-promise.html in the overlay starter
    <!doctype html>
<!-- The opening panel: the promise, and the one with a subline. -->
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="../panel.css" />
  </head>
  <body>
    <img class="capture" data-capture="01-home.webp" alt="" />
    <header class="band">
      <h1 data-string="headline"></h1>
      <p data-string="subline"></p>
    </header>
    <script type="module" src="../panel.js"></script>
  </body>
</html>
    The top of panel.css, where the look is set
    :root {
  --ground: #16181d;
  --ink: #ffffff;
  --ink-soft: rgb(255 255 255 / 0.88);
  --accent: #c8372d;
  --highlight: #ffd84d;
  --font-display: system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-text: system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  /* How steeply the band's edge and the words on it rise to the right. */
  --slant: 5deg;
  /* How much the magnifier enlarges what is under it. */
  --zoom: 1.5;
}
    strings/en-US.json, this starter's choice of format. Your panels read it, not recadro, so the format is yours.
    {
  "01-promise": {
    "headline": "Say what it *does*.",
    "subline": "One line on who it is for."
  },
  "02-moment": { "headline": "Show it working." },
  "03-difference": { "headline": "Name what only it does." },
  "04-everyday": { "headline": "Make the daily part *easy*." },
  "05-start": { "headline": "End on how to start." }
}

    Edit the layout — on your own or with your agent.

    npx recadro dev opens the lineup: every panel side by side, reloading as you save. Edit the files yourself, or ask your coding agent. The lineup has a pointer to help you tell it where: click, and it copies a reference to the exact spot you mean.

    npx recadro dev --live opens a connection between the lineup and your agent: click an element, type your note right there in the browser, and it goes straight to your agent.

    npx recadro skill sets this up in your repo as a skill for Claude Code. Underneath are two plain commands, recadro wait and recadro reply, so another agent can run the same loop.

    Recorded, because this part needs an agent in a repo: the lineup during a working session, with Claude Code listening. It plays at twice the speed and the waits for the agent are cut. 57 seconds, no sound; full screen shows the notes at reading size.

    One command renders every screenshot.

    npx recadro render opens each panel at every device's viewport, waits until it has fully loaded, and writes PNGs at Apple's sizes: 1320×2868 for the 6.9″ iPhone, 2048×2732 for the 13″ iPad.

    It renders the devices you've captured screens for and skips a panel whose screen isn't captured yet, so out/ only ever holds what can ship.

    It runs headless in Playwright's Chromium, on your machine or in CI. Upload the PNGs in App Store Connect by hand, or from your pipeline: fastlane's deliver reads out/ as it is, and asc or the App Store Connect API take the same files.

    npx recadro render
recadro  5 panels in store/screenshots
         devices   iPhone, iPad  (captures)
         locales   en-US  (strings/)
         out       store/screenshots/out/{locale}/{device}-{slug}.png

  wrote   en-US/iPhone-01-promise.png
  wrote   en-US/iPhone-02-moment.png
  wrote   en-US/iPhone-03-difference.png
  wrote   en-US/iPhone-04-everyday.png
  wrote   en-US/iPhone-05-start.png
  wrote   en-US/iPad-01-promise.png
  wrote   en-US/iPad-02-moment.png
  wrote   en-US/iPad-03-difference.png
  wrote   en-US/iPad-04-everyday.png
  wrote   en-US/iPad-05-start.png

10 written, 0 skipped → store/screenshots/out
    What it printed for the overlay starter when this page was built. The PNGs it wrote measure 1320×2868 for iPhone and 2048×2732 for iPad, read back from the files.

    Start in your repo.

    Free for any app, paid or free. Your screenshots, and the sets you start from a starter, are yours.

    GitHubInstructions for coding agents

    Start from the overlay starter:

    npm install -D recadro
npx recadro init store/screenshots \
  --starter overlay \
  --captures path/to/captures
npx recadro dev