DEV Community

Magic.rb
Magic.rb

Posted on

I built a free, open-source App Store Screenshot Generator

#opensource #webdev #react

As an indie developer, I was tired of paying $15+/month for screenshot tools or spending hours in Figma every time I needed App Store screenshots. So I built my own — and open-sourced it.

Appshots screenshot

🔗 Live Demo: appshots.appstate.xyz

📦 GitHub: github.com/oyeolamilekan/appshots

What is it?

A browser-based editor that lets you create professional, high-converting screenshots for the Apple App Store and Google Play Store in minutes. No accounts. No cloud. No tracking. Everything runs locally in your browser.

Features

📱 Device Frames

  • 6 realistic device mockups — iPhone 15 Pro Max, iPhone 15 Pro, iPhone 14, iPad Pro 12.9", Samsung Galaxy S24 Ultra, Samsung Galaxy Tab S9
  • Multiple color options per device — Black Titanium, Natural, Blue, White, and more
  • Flat 2D & 3D rendering modes — toggle between a classic frame and a perspective 3D view with visible device edges
  • 3D rotation controls — adjust Rotate Y and Rotate X for the perfect angle
  • Accurate camera elements — Dynamic Island, notch, and punch-hole matching each device

🎨 Backgrounds & Appearance

  • Solid color backgrounds with a full color picker
  • 6 gradient presets — Sunset, Ocean, Mint, Berry, Royal, Rose
  • Global text color picker

📝 Rich Text & Fonts

  • Rich text editor for headlines and subheadlines — bold, italic, underline, text color, alignment
  • Google Fonts integration — search and preview hundreds of fonts
  • Independent sizing for headline and subheadline
  • Width control per text block
  • Drag-to-reposition text anywhere on the canvas

🖼️ Overlay Images

  • Unlimited overlay images — upload badges, logos, arrows, or decorations
  • Drag, resize, and rotate each image independently
  • Layer management — place behind or in front of the device, reorder freely
  • Per-image shadow with color, blur, and offset controls

📐 Layout & Positioning

  • 8 position presets — Centered, Bleed Bottom, Bleed Top, Float Center, Float Bottom, Tilt Left, Tilt Right, Perspective
  • Device size slider (scale %)
  • Device vertical position slider (offset %)
  • Device shadow — toggle on/off with color, blur, and vertical offset controls

📋 Project Management

  • Multiple projects — create, rename, switch between, and delete
  • Auto-save — all settings persist to localStorage across sessions
  • Reset to defaults — clear everything and start fresh

📦 Export

  • Batch export — export all screenshots at once (ZIP for multiple, PNG for single)
  • 4 export size presets — 6.7" iPhone, 6.5" iPhone, 5.5" iPhone, 12.9" iPad Pro
  • Full 3D support — perspective, edges, and shadows preserved in exports
  • Pixel-perfect output matching the on-screen preview

🖥️ Editor Experience

  • Multi-screenshot gallery with horizontal carousel
  • Real-time preview — all changes update instantly
  • Drag-and-drop repositioning on the canvas
  • Element selection with visual feedback
  • Dark mode UI

How to use it

  1. Select a device — pick from iPhones, iPads, or Samsung devices
  2. Upload a screenshot — add your app's screenshot to the device screen
  3. Edit text — add headlines and subheadlines, format with the rich text toolbar
  4. Pick a font — browse Google Fonts for the perfect typeface
  5. Set a background — choose a solid color or gradient
  6. Position the device — use presets or manually adjust size, position, rotation
  7. Switch to 3D — toggle 3D mode and tweak perspective angles
  8. Add overlays — upload badges or logos and layer them around the device
  9. Export — download all screenshots at App Store resolution

Tech Stack

Tool Purpose
React 19 UI framework
TypeScript Type safety
Tailwind CSS 4 Styling
Vite 7 Build tool
TanStack Router Routing
shadcn/ui UI components
Lucide React Icons
Google Fonts API Font loading

Run it locally 

git clone https://github.com/oyeolamilekan/app-screenshot-generator.git
cd app-screenshot-generator
bun install
bun run dev
Enter fullscreen mode Exit fullscreen mode

Opens at http://localhost:5173.

Why open source?

App Store screenshot tools shouldn't cost a monthly subscription. This tool is MIT licensed — use it, fork it, modify it, ship it. No strings attached.

What's next?

I'm actively working on this and would love your input. If you have feature requests or find bugs, open an issue on GitHub.

If you find it useful, a ⭐ on GitHub would mean a lot!

Made with ❤️ for iOS and Android developers

Top comments (0)