How I built a fast Device Mockup Generator in Vanilla JS

#webdev #javascript #opensource #design

As frontend developers and designers, presenting our work in beautiful device frames is essential for portfolios and client pitches. I was tired of opening heavy design tools just to wrap a screenshot in a laptop frame, so I built a blazing-fast, client-side Mockup Generator.

The Approach

I built this using 100% Vanilla JS and the HTML5 Canvas API. All image processing happens locally in your browser, ensuring zero server uploads and complete privacy for your unreleased projects.

Here is a quick look at how the core logic draws the user's screenshot onto a device frame canvas:

function generateMockup(screenshotImg, deviceFrameImg, canvas, offsetX, offsetY, width, height) {
    const ctx = canvas.getContext('2d');

    // Set canvas size to match the device frame
    canvas.width = deviceFrameImg.width;
    canvas.height = deviceFrameImg.height;

    // Draw the device frame first
    ctx.drawImage(deviceFrameImg, 0, 0);

    // Overlay the screenshot at the specific screen coordinates
    ctx.drawImage(screenshotImg, offsetX, offsetY, width, height);

    return canvas.toDataURL('image/png');
}