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

const moqq = 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