Add image editing features to your PWA

Demo

App screenshots are super important. Users want to see what an app does and what it looks like before installing it. So one of the features I really wanted to build into Progressier was the ability for users to design, manage, localize screenshots for their PWAs — directly inside the dashboard.

I first developed it as a feature for paying customers, but then made a free no-signup-required version of it, which you can use to design screenshots for PWAs (or any other types of apps, really). It's entirely built in vanilla JavaScript and uses <canvas> for all image editing and rendering features.

Progressier functions as a PWA itself, and it works great on both desktop and mobile! Install the app, open it from your homescreen, and tap the button below to start designing.

Popular Image Editing PWAs

• Photopea: a versatile online image editing tool that offers powerful features akin to traditional graphic design software. Photopea may be a PWA but it's just as good as native alternatives. Since I've discovered Photopea, I've never had to open Photoshop again. And did I mention it's free?
• Corel Vector: If Photopea is an Adobe Photoshop alternative, then Corel Vector (formerly Gravit Designer) is a Adobe Illustrator alternative. This PWA can be installed on any desktop computer and allows you to create complex illustrations, vector images, and technical drawings.

Use Cases

Photopea and Corel Vector are some of my favorite PWAs. Each time I utilize them, I'm consistently astounded by the capability of accomplishing such intricate image editing directly on the web.

But you can also integrate simpler image manipulation techniques into your existing PWA: image resizing, cropping, rotating, flipping, color correction, sharpening, HDR, color grading, blurring, background removal, noise reduction — these techniques are fairly easy to implement with a bit of JavaScript and the Canvas API.

Links & Documentation

• Graphic Canvas Element on MDN
• Free screenshot designing tool