Why Did We Build Our Own Screenshot Tool Instead of Buying One?

Existing tools cost $15+/month, required Figma or Photoshop skills, or watermarked the free tier — we ship 6 Flutter apps and needed something fast, free, and purpose-built instead.

Every time we shipped an app to the App Store, the same bottleneck appeared: screenshots. Apple and Google require specific resolutions, and plain screenshots look unprofessional next to competitors who frame theirs in polished device mockups with gradient backgrounds and marketing text.

The existing tools either cost $15+/month, required Figma or Photoshop skills, or were bloated web apps with watermarks on the free tier. We ship 6 Flutter apps. We needed something fast, free, and purpose-built for app store screenshots. So we built Framely.

How Do You Keep 40+ Device Frames Accurate as New Phones Ship?

By rendering every frame in pure CSS from one config file — no images — so adding the iPhone 18 the day it's announced is a one-line addition, not a new asset to design.

Framely's core is its device catalog. We modeled 40+ devices across Apple, Samsung, and Google — each with exact screen dimensions, border radius, bezel thickness, and notch type (Dynamic Island, punch hole, home button, or none).

The device data lives in a single designSystem.js config file. Adding a new device is a one-line addition with its screen dimensions, bezel specs, and category. When Apple announces the iPhone 18, we add it in minutes.

Each frame renders as pure CSS — no images. The bezels, rounded corners, notches, and status bars are all generated with CSS properties. This keeps the bundle tiny and the frames resolution-independent.

What Layout Templates Does Framely Support?

Six: Single, Duo, Trio, Grid, Stacked, and Fan — switching between them is instant and keeps your uploaded screenshots and text in place.

App Store screenshots often show multiple screens together. Framely supports 6 layout templates:

  • Single — one centered device, classic marketing screenshot
  • Duo — side-by-side comparison of two screens
  • Trio — three devices for feature showcases
  • Grid — 2×2 layout for feature overviews
  • Stacked — overlapping devices with depth effect
  • Fan — angled spread for dramatic presentations

Switching layouts is instant. Your uploaded screenshots and text stay in place — only the device positioning changes.

How Do You Add Context to a Raw Screenshot?

With draggable text, callout cards, and arrow annotations layered over gradient backgrounds with texture effects like noise, grain, and vignette — turning a flat screenshot into something that looks designed.

Screenshots need context. Framely includes a full text editing system with 16+ Google Fonts, adjustable size, weight, color, and rotation. A floating toolbar appears when you select text — similar to a rich text editor but for visual design.

For pointing out specific features, callout cards and arrow annotations can be dragged onto the canvas. These are especially useful for highlighting a new button, a settings panel, or a key workflow step.

Backgrounds use gradient presets (Nature Teal, Deep Ocean, Midnight, Spring Meadow, and 9 more) or custom 2-color gradients with angle control. On top of gradients, you can layer effects: noise, paper texture, film grain, dot patterns, grid overlays, vignette, and glow. These effects turn a flat gradient into something that feels designed.

How Do You Export Pixel-Perfect Screenshots From a Browser Canvas?

By hiding every interactive UI element before capture, then running html2canvas at 3x scale to hit Apple's exact pixel requirements without any editor chrome leaking into the PNG.

Apple requires screenshots at specific resolutions. For the iPhone 15 Pro Max, that's 1290×2796 pixels. Our canvas renders at 430×932 pixels on screen (for performance), then exports at 3x scale using html2canvas.

The tricky part: html2canvas captures the DOM as-is. Any UI controls, selection handles, or hover states would appear in the export. We hide all interactive elements during capture (display: none on toolbars, selection rings, and resize handles), run the capture at 3x scale with useCORS: true, then restore the UI. The result is a clean, high-resolution PNG with no artifacts.

Why Does Framely Have No Backend at All?

Because everything — image processing, canvas rendering, PNG export — happens in the browser, which means zero infrastructure cost beyond free-tier Firebase Hosting and your screenshots never leave your machine.

Framely is a fully client-side application. There's no server, no database, no user accounts. Everything happens in the browser: image processing, canvas rendering, text editing, and PNG export. The only external dependency is Google Fonts loaded via CDN.

This means zero infrastructure costs beyond Firebase Hosting (free tier). It also means your screenshots never leave your machine — there's nothing to upload, nothing stored on our servers, and no privacy concerns.

How Does One Config File Power 40+ Devices and 13+ Gradients?

By treating designSystem.js as the single source of truth — new devices, fonts, or gradients are config additions, not code changes, so extending the app never touches app logic.

The entire app's visual language lives in designSystem.js: 40+ device specs, 20+ device colors, 13+ gradient presets, 16+ fonts, background effects, and layout configurations. This single source of truth makes the app easy to extend. New gradients, fonts, or devices are config additions, not code changes.

The color theme is nature-inspired: primary green (#75B06F), teal (#36656B), yellow (#DAD887), against a dark background (#0d1a1c). It's calm, focused, and doesn't compete with the screenshots being designed.

What Did Building Framely Teach Us?

CSS-only frames beat images for scale, html2canvas needs manual UI hiding before capture, a good config file pays for itself, and removing signup friction is what actually gets a free tool used.

  • CSS-only device frames scale better than images — resolution-independent and trivial to customize
  • html2canvas has quirks — you need to manually hide UI before capture and handle cross-origin images carefully
  • A good design system file pays for itself — one config file powers 40+ devices, 13+ gradients, and 16+ fonts
  • Free tools get used — removing the signup and payment friction means people actually try it

Try It

Framely is free at framely-studio.web.app. No account, no watermarks. Upload your screenshots, pick a device frame, add some text, and export. Check out the product page for a full feature overview.