Mockup Studio
Our free browser tool for app store screenshots. One project renders every variant, language, screen and device, then publishes the set to Google Play, the App Store and the Microsoft Store.
4
stores it prepares listings for
252
images from one 6-screen Solitaire project
7
device presets: phone, tablet and desktop
600K
PBKDF2 rounds guarding the key vault
- Product
- Our own, free and public
- Platform
- Web app, runs in the browser
- Stores
- Google Play, App Store, Microsoft Store, Chrome Web Store
- Our part
- Everything: product, design, code
- Timeline
- Since April 2026, in active development
The brief.
Context
Mockup Studio is our own product, free at mockup.korlab.team. A developer drops in raw captures, picks device frames and writes each title once per language. The tool renders the store images and sends them to the stores. We use it for our own releases: the Solitaire listings on Google Play, the App Store and the Microsoft Store come out of it.
Challenge
Every store has its own sizes and every language needs its own titles. A listing with two variants, three phones, seven languages and six screens is already 252 images. Change one screen or one translation and the whole set has to be rendered and uploaded again, by hand, in several consoles.
Approach
Everything happens in a browser tab. A screen holds a translation key, not text, so a corrected title updates every image that uses it. Images are drawn on a canvas, then packed into a ZIP or sent straight to the store APIs. Store keys sit in a vault encrypted on the device. Where a store blocks browser calls, a Cloud Function forwards the request and keeps nothing.
One project, every combination.
A project is variants, languages, screens and devices. Pick any combination in the toolbar and the canvas shows that exact store image: title, background, frame and the real capture. Our Solitaire set is 2 variants, 3 phones, 7 languages and 6 screens, so one export renders 252 images.
Titles are keys, not text.
Each screen points at a translation key. The localization table holds every key in every language, and fixing one cell redraws every image that uses it. Missing languages can be filled by Gemini with the developer's own API key, which goes from the browser to Google and nowhere else.
Ready for four stores.
A publish run takes variants, store buckets and languages, shows what is configured and uploads. Google Play gets a draft to release from the Console, the App Store a version waiting for submission. The Microsoft Store goes through its submission API, and Chrome Web Store screenshots come out packed per locale.
- Listing text loads from Google Play, the App Store and the Microsoft Store, and only changed fields are pushed back.
- In-app products are defined once and published to Google Play and the App Store.
Keys are encrypted before saving.
A Google service account or an Apple .p8 key can be picked from disk for one run or kept in a vault. The vault is encrypted in the browser with AES-GCM. Its key comes from a master password through 600,000 rounds of PBKDF2, or from a passkey. We store only ciphertext.
- Where a store refuses browser calls, a Cloud Function signs and forwards the request and keeps nothing.
A browser app, five small proxies.
The editor is a Vue 3 app on Firebase. Rendering, ZIP packing and Google request signing run in the page. Five Cloud Functions exist only because Apple, Microsoft, RevenueCat and parts of the Google Play API send no CORS headers to a browser.
Captures in
Raw screenshots are matched to screens by file number and stored in Firebase Storage.
One project document
Variants, languages, screens, devices and translations live in one Firestore document.
Canvas render
Each store image is drawn in the browser at the exact pixel size the store asks for.
Signing
Google requests are signed in the page with Web Crypto. Apple's ES256 token is signed by a Cloud Function.
Store APIs
Google Play, App Store Connect and the Microsoft Store receive the images and the listing text.
Free, and open to anyone.
Anyone can start with a Google, email or anonymous account, and an anonymous project can later move to a permanent one. There is no paid tier, no per-screenshot quota and no watermark on exports.
What we built.
Our part
- Product idea, scope and interface
- Canvas renderer and the variant, language, screen and device model
- Publishing clients for four stores
- Cloud Function proxies for the APIs browsers cannot call
- Encrypted credential vault with passkey unlock
- Gemini translation and a read-only RevenueCat mirror
- CI/CD with a preview deploy for every pull request
Stack
- App
- Vue 3
- TypeScript
- Pinia
- Vue Router
- Vite
- Tailwind CSS
- Firebase
- Firebase Auth
- Firestore
- Cloud Storage
- Cloud Functions
- Firebase Hosting
- Stores
- Google Play Developer API
- App Store Connect API
- Microsoft Store submission API
- Chrome Web Store API
- Security
- Web Crypto: AES-GCM, PBKDF2, RS256
- WebAuthn PRF passkeys
- Integrations
- Gemini API
- RevenueCat API v2
- JSZip
- Delivery
- GitHub Actions
- Firebase preview channels
Releasing in many languages?
Let's automate the dull part.
We build tools for the release work a team still does by hand. Tell us what yours is.
