Generate beautiful device mockups from your Web App without taking screenshots.

Every time I build a responsive web app I end up wanting to add an image like the above to my landing page to showcase the fact that my app works well from both desktop & mobile devices.

There is a litany of services that enable you to upload a screenshot and output nice looking assets of that screenshot in various different devices. My biggest frustration with these is that I have to upload screenshots of the precise right dimensions or the end result is not great.

I have found one service (screenpeek) that you can point at a URL and it will place your rendered page into a device, but this only works for publicly accessible sections of your website.

I ended up whipping up a simple app that enables me to load my Web Apps into different devices on a page. You can even navigate into authenticated parts of your app since iframes pass cookies just like visiting from a browser. This makes it really easy to create mockups using the desired content & even enables creating cool gifs of your site being used.

Would any of you find this useful? Perhaps even pay for a more advanced version of it?

I'd love to provide a link to my proof of concept but I guess I don't have enough of a reputation here yet. If you're motivated you can visit at: web-mockup . netlify . app

As is it won't load pages that block being loaded in an iframe (using x-frame-origins header) but you can get around this with a chrome extension or packaging it as a desktop (electron) application.

Just wondering if the idea of providing this as a service has any legs.