Skip to content

YoteiSan/appshots

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

appshots

Make App Store and Play Store screenshots in your browser. Drop in your app screenshot, write a headline, export a PNG at the exact size the stores require. No account, no build step, no internet.

Run

node serve.mjs

Open http://localhost:8080.

Needs Node (any recent version, no dependencies).

Use

  1. Pick iOS or Android to set the canvas size.
  2. Drop a screenshot onto a frame, or use the Screenshot button under it. Drop an image anywhere else on the frame to set a background. Add frame in the header adds more (up to 10).
  3. Click the headline or subtitle to edit the text. Edits are saved in your browser.
  4. Flip the language tab (EN, ES, FR, DE, IT, PT, JA, KO, ZH, RU, AR) to write copy per market. Each language keeps its own edits and starts from the English text. Arabic renders right to left.
  5. Click Export to download that frame as a PNG. Export all does every frame. Filenames carry the platform and language, like appshots-01-screen-1-ios-es.png.
  6. Repeat per platform and language for every set the stores need.

Change the frames

Edit the FRAMES list near the top of the <script> in index.html:

const FRAMES = [
  { id: 1, label: 'Screen 1', headline: 'Say what your app does', sub: 'One clear line under the headline.' },
  { id: 2, label: 'Screen 2', headline: 'Show the main <span class="em">feature</span>', sub: 'Keep it short.' },
];

The list holds the default copy for the first six frames; frames added with the button start with generic copy. Wrap a word in <span class="em">...</span> to color it. A frame can also carry fixed translations, used as the starting text for that language:

{ id: 1, ..., translations: { es: { headline: 'Di qué hace tu app', sub: 'Una línea clara.' } } }

Sizes

  • iOS: 1320 x 2868 (App Store 6.9" size, iPhone 16/17 Pro Max)
  • Android: 1080 x 2400 (Play Store phone size, Pixel 8)

To change them, edit PLATFORM_SIZES in index.html.

Offline

Everything runs locally. The exporter is bundled in vendor/ and the tool uses system fonts, so nothing is fetched from the internet.

Credits

PNG export by modern-screenshot (MIT), bundled in vendor/.

License

MIT. See LICENSE.

About

App screenshot preparer, 10+ languages and formats for iOS & Android. Best used with agent for custom look/feel

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors