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

| 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