Create Device Mockups in Browser with DeviceMock

By Jake Rocheleau. in UI/UX. Updated on July 22, 2022.

You can find tons of free device mockups online, ranging from PSDs to Sketch files. But, what if you could quickly build device mockups on-the-fly in your browser?

Well, thanks to the folks at rm-labo, you can! Their free jQuery plugin, DeviceMock.js, lets you wrap a vector device around any page element, using simple JavaScript and SVGs.

So, how exactly does this work?

Well, first you need a copy of jQuery and a version of the DeviceMock plugin from GitHub. This comes with a JS file, CSS file, and some SVG files to create the actual devices.

You can target any type of element on the page, from a simple image to an entire div, or even an embedded element such as an iframe. This means you could even build a cool mini-browser right in your site with an iframe to another page.

This plugin supports five different device types:

Web browser
Smartphone
Tablet
Desktop
Laptop

All of these mockups use flat design styles since they’re built with SVGs. And, they all look quite similar to Apple devices, for instance the smartphone being a clone of the iPhone and the desktop monitor looking conspicuously like an iMac.

All of these vectors are easy to add and they work in every browser with SVG support.

You can even change properties such as the mockup size, theme (white/black) and orientation (portrait landscape).

If you use the browser mockup you can even specify a dummy URL in the address bar. This is a fun way to add even more customization.

Granted this library won’t be useful for everyone but it does solve a niche problem that many UI/UX developers face when prototyping.

To learn more, visit the GitHub page or check out the live site for an active demo.