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.
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.