moqq v1.0.3

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

JS Docs

Classes

Typedefs

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

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