moqq - minimalistic device mockups.

This package utilizes Jimp to compose device mockups. Currently only mockups with a pc are supported.

In action: andreev.work/projects

Installation

npm i -g moqq for use anywhere. See https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally if EACCESS errors arise.

npm i moqq for use in the current package.

JS Docs

Classes

Moqq

Interfacing class

Typedefs

ImageInput : path | Jimp | ArrayBuffer

Moqq

Interfacing class

moqq.up(options) ⇒ string | Jimp

Composes a Jimp image consisting of devices with complementary screenshots as declared in options. Returns path to that image or the Jimp instance.

Kind: instance method of Moqq
Returns: string | Jimp - Path to resulting image or resulting Jimp instance

Param	Type	Default	Description
options	object
options.screenshots	object.<string, ImageInput>		object with deviceNames as keys and paths, ArrayBuffers or Jimps as values.
[options.resPath]	string		path to resulting image (relative to caller location).
[options.w]	number	1280	width of resulting image.
[options.h]	number	720	height of resulting image.
[options.returnJimp]	boolean	false	If true, a Jimp instance is returned. Otherwise image is saved to resPath.
[options.background]	string | number	"0x00000000"	Background color as css string or hex number (0xrrggbbaa).
[options.statusBar]	number		What style status bar to add (moqq.STATUSBAR_LIGHT or moqq.STATUSBAR_DARK). Currently only vertical iPhone X is supported.
[options.paddingX]	number	0.8	Horizontal padding relative to image width (0.0 - 1.0)
[options.paddingY]	number	0.8	Vertical padding relative to image height (0.0 - 1.0)

JS Usage

constmoqq=new(require('moqq'))();moqq.up({screenshots: {pc: 'path/to/pc.png',iphone_x: 'path/to/iphone_x.png'},resPath: 'path/to/result.png',w: 800,h: 600,statusBar: moqq.STATUSBAR_LIGHT,background: 'white'}).then((fPath)=>{console.log(fPath););

CLI

moqq-up [options]
Generate mock up from provided screenshots.
Options:
--version Show version number [boolean]
--pc Provide screenshot for PC. [string]
--iphone_x Provide screenshot for iPhone X. [string]
--iphone_6/7/8 Provide screenshot for iPhone 6/7/8. [string]
--ipad Provide screenshot for iPad. [string]
-w, --width Width of resulting image. [number] [default: 1280]
-h, --height Height of resulting image. [number] [default: 720]
-b, --background Background of resulting image as a css color string.
[string] [default: "transparent"]
-s, --statusbar Style of status bar to add (none/light/dark). Currently only
supported for vertical iPhone X. [string] [default: "none"]
-o, --output File to write resulting image to.
[string] [default: "./mock-up.png"]
--help Show help [boolean

CLI Usage:

Take a screenshot of your website using Chrome DevTools for all devices you need (choose device, Shift+Ctrl+P, type "Capture Screenshot"). Then feed them to the cli:

moqq-up --pc pc-screenshot.png --iphone_x mobile-screenshot.png -w 800 -h 600 -b transparent -o result.png