Render

To render a mockup using an uploaded image or website url you can use the /mockups/render endpoint.

POST /mockups/render/<mockup-name>

Parameters:

  • zoomLevel: set the zoom level for the mockup (default: 1 => 640px) (range: 0.0-4.0)
  • format: output image format (default: jpg) (options: jpg/png/pdf)
  • input: array of strings that can be images or website uri that will be replaced in the final mockup

Samples:

{
    zoomLevel: 1,
    format: "jpg",
    input: [
        'https://dummyimage.com/500/7dffb8/000000',
    ]
}
{
    input: [
        'https://www.macrumors.com/roundup/ipad-pro/',
    ]
}
{
    input: [
        'https://dummyimage.com/500/de6b35/000000.jpg',
        'https://dummyimage.com/500/64ccda/000000.png',
    ]
}

Valid response: 200 Ok

{
 "status": "success",
 "data": {
  "slug": "swiasi-android-s5-top",
  "name": "Samsung Galaxy S5 Top View",
  "status": "successful",
  "zoomLevel": 1,
  "format": "jpg",
  "result": {
   "url": "https://mockupsjar-production.s3-eu-west-1.amazonaws.com/renders/swiasi-android-s5-GipAn8PoAjFYR6Ax.jpg",
   "previewUrl": "https://mockupsjar-production.s3-eu-west-1.amazonaws.com/renders/3IXPXyGqGvWSAjld-QpzEnU9We8FzPUUX.jpg"
  }
 }
}

Invalid response: 500 Exception

Code sample

const axios = require('axios');
const API_URL = process.env.API_URL;        // https://api.mockupsjar.com
const API_TOKEN = process.env.API_TOKEN;    // Put your API TOKEN in here

axios({
    method: 'post',
    url: `${API_URL}/mockups/render/swiasi-android-s5-top`,
    headers: {
        'Authorization': 'Bearer ' + API_TOKEN
    },
    data: {
        input: [
            'https://en.wikipedia.org/wiki/Quantum_mechanics',
        ]
    }
})
    .then((response) => {
        console.log(response.status, response.statusText, JSON.stringify(response.data, null, ' '));
    })
    .catch((e) => {
        console.info('exception', e.message);
    })