March 28, 2024

DeviceMock.js Produces Device Mockups via JavaScript

Previewing a new design can help to frame your concept in perspective. It can show what you’re doing that works, what might not be working, and how the final product should look.

This process often requires a graphic design program like Photoshop or Sketch. But if you’re someone who likes to pass designs via code or build in the browser then DeviceMock.js is perfect.

You simply call the script via JavaScript and pass options into the DeviceMock method. This will display any image or container within your device mockup as needed.

DeviceMock js

While this can have significant value during live website testing, it’s also a great resource for building previews for your own site. If you run a small app or program you can show live previews right on the landing page. DeviceMock simply offers a JS-powered method as opposed to only images.

The whole platform is completely open source under the MIT license and free to download straight from GitHub.

Note that it does require the jQuery library along with its own DeviceMock CSS dependency. All JS options are located on the plugin homepage with information about each option and how to pass these parameters into the main function.

Jake is a creative writer and UI designer by trade. You can follow him on twitter @jakerocheleau or learn more at his personal website JakeRocheleau.com.

Leave a Reply

Your email address will not be published. Required fields are marked *