Render Mockup API

Create a Mockup Render

post

Returns an image URL of the selected mockup template and provided design asset.

Authorizations

apiKeyAuth

x-api-keystringRequired

API key required for authentication.

Header parameters

Acceptstring · enumRequired

The request must accept JSON responses.

Possible values:

x-api-keystringRequired

API key required for authentication.

Example: YOUR_API_KEY_HERE

Body

application/json

mockup_uuidstringRequired

The UUID of the mockup template.

Example: 754a46c5-7693-43a1-9cd4-aedabd273f57

export_labelstringOptional

A label for the exported image.

Example: MY_FIRST_IMAGE_01

Responses

200

Image successfully rendered.

application/json

400

Bad request due to invalid input parameters.

401

Unauthorized request, invalid or missing API key.

post

/renders

HTTPcURLJavaScriptPython

POST /api/v1/renders HTTP/1.1
Host: app.dynamicmockups.com
x-api-key: YOUR_API_KEY_HERE
Accept: application/json
Content-Type: application/json
Content-Length: 844

{
  "mockup_uuid": "754a46c5-7693-43a1-9cd4-aedabd273f57",
  "export_label": "MY_FIRST_IMAGE_01",
  "export_options": {
    "image_format": "jpg",
    "image_size": 1500,
    "mode": "view"
  },
  "smart_objects": [
    {
      "uuid": "0ff99239-c91a-47f8-86e6-61229ff93626",
      "asset": {
        "url": "https://app-dynamicmockups-production.s3.eu-central-1.amazonaws.com/static/api_sandbox_icon.png",
        "fit": "stretch",
        "size": {
          "width": 100,
          "height": 100
        },
        "position": {
          "top": 100,
          "left": 100
        },
        "rotate": 180
      },
      "pattern": {
        "enabled": true,
        "scale_percent": 60
      },
      "color": "#444ABF",
      "blending_mode": "MULTIPLY",
      "adjustment_layers": {
        "brightness": 100,
        "contrast": 50,
        "opacity": 100,
        "saturation": 0,
        "vibrance": -20,
        "blur": 20
      },
      "print_area_preset_uuid": "d542b299-7350-495e-8bed-51060318d45"
    }
  ],
  "text_layers": [
    {
      "uuid": "5fea4761-8e6c-458a-b957-313e95c960d0",
      "text": "Sample Text",
      "font_family": "Arial",
      "font_size": 24,
      "font_color": "#FF5733"
    }
  ]
}

{
  "data": {
    "export_label": "MY_FIRST_IMAGE_01",
    "export_path": "https://app-dynamicmockups-psd-engine-production.s3.eu-central-1.amazonaws.com/variation-exports/example.jpg"
  },
  "success": true,
  "message": ""
}

Export OpenAPI specification for Render API

11KB

render_api.json

Open

You need multiple mockup renders in a single request?

See Batch Render Mockups API. A more efficient way to generate multiple mockups in a single request way much faster than the Render Mockup API.

export_label

When defining this optional parameter in your request, the same value will be returned in the response.

This parameter is used to help recognize the request you sent with the label.

export_options.image_format

By default, we return a .png rendered image.

But sometimes, for example, you want to get a more optimized image for the web.

By providing some of the following values: jpg, png, webp you can control what image format you want from our API.

export_options.image_size

Same as image_format, you can tell our API if you need an image of a specific size.

We will return high image resolution, but sometimes you need smaller ones.

Provide export_options.image_size = 720 to get the image with 720px width.

The provided value will define image width and height will auto-scale.

export_options.mode

Our API exports images as binary by default, causing the browser to download them automatically.

To display the image in the browser instead of downloading it, set export_options.mode = "view".

smart_objects.asset.url

The provided URL image will be rendered inside a chosen smart object UUID.

The image must be one of the following extensions: jpg, jpeg, png, webp, gif

Make sure that the provided URL is publicly available since our API needs to download it and use it for render purposes.

This is especially important when providing links from Dropbox, Google Drive, and similar tools, make sure you provide the right URL with public permissions.

If not available or does not have permission to download, the API call will result in an error.

smart_objects.asset.file

In some cases, you will want to send the binary file instead of the URL.

To send the binary file, include it as part of the smart_objects.asset object, using the file property instead of url. Ensure that the file is sent using FormData.

When sending a binary file in an API request, you must use FormData instead of sending the file as part of a JSON payload. This is because binary files cannot be directly represented in JSON format.

The image must be one of the following extensions: jpg, jpeg, png, webp, gif

smart_objects.color

This optional field will paint the whole smart object with the provided color value.

You can provide two different value types:

• hexadecimal value, example: #AA411B

• or color names from this link

Left image without color - Right image with color

smart_objects.asset.fit

In our web application editor, you can utilize the power of Print Area to position and size assets. Each of your uploaded assets using the Render API will inherit this setting.

You can optionally change the print area fit mode by selecting one of these: stretch, contain, cover

If you do not provide fit mode using Render API, we will inherit your setup in the web application and the asset will be used in the selected fit mode, size, and position.

smart_objects.asset.position

You can optionally change the position of your asset using Render API.

Set position.top and position.left to tweak your asset position if necessary.

If you do not provide a position using Render API, we will inherit your setup from the editor in the web application.

We highly recommend placing the print area in the web application editor. In that case, any assets provided to Render API will be automatically placed inside that print area box without providing any position values.

smart_objects.asset.size

You can optionally change the size of your asset using API.

Set size.width and size.height to tweak your asset size if necessary.

Same as the asset.position, asset.size will be inherited from the editor in the web application if not provided.

This way, we allow you to visually set your asset position and size in our web application editor so you don't have to provide any asset positions and sizes using Render API.

smart_objects.print_area_preset_uuid

You can optionally provide print_area_preset_uuid inside each smart object to automatically position the provided asset without explicitly setting any position, fit, rotate, or size.

Inside our web application editor, you can easily create new print area presets, which will automatically appear inside our Get Mockups API where you can get print_area_presets details for each mockup and smart object.

To create new print area presets, upload the design asset and set the print area you want. You can create any amount of print area presets.

smart_objects.asset_as_pattern

You can optionally provide asset_as_pattern: true inside each smart object to automatically make a pattern(repeated asset) over the whole smart object area.

Within our web application editor, you can easily turn on the asset pattern feature and set up the desired pattern density and area, which will be automatically inherited when calling our Render API.

Use asset_as_pattern to override the default settings from the web application editor when calling our Render API.

smart_objects.blending_mode

You can optionally apply blending_mode to the smart object.

Supported blending mode list:

NORMAL, DISSOLVE, DARKEN, MULTIPLY, COLOR_BURN, LINEAR_BURN, DARKER_COLOR, LIGHTEN, SCREEN, COLOR_DODGE, LINEAR_DODGE, LIGHTER_COLOR, OVERLAY, SOFT_LIGHT, HARD_LIGHT,
VIVID_LIGHT, LINEAR_LIGHT, PIN_LIGHT, HARD_MIX, DIFFERENCE, EXCLUSION, SUBTRACT, DIVIDE, HUE, SATURATION, COLOR, LUMINOSITY

No Blending Mode

Blending mode "SCREEN" applied

smart_objects.adjustment_layers

You can optionally apply adjustment_layers to the smart object.

Supported adjustment layer list:

Adjustment layer	Min value	Max value	Default value
contrast	-100	100	0
brightness	-150	150	0
opacity	0	100	100
saturation	-100	100	0
vibrance	-100	100	0
blur	0	100	0

//Render API adjustment_layers request example

"smart_objects": [{
    "uuid": "...",
    "asset": {...},
    "color": "...",
    "adjustment_layers": {
        "brightness": 100,
        "contrast": 50,
        "opacity": 100,
        "saturation": 30,
        "vibrance": 15,
        "blur": 5
    }
}]

Adjustment layers will be reflected in the Render API(just like Asset position does).

We will inherit your setup from the web application's editor if you do not explicitly provide adjustment_layers using the Render API.

Set the Adjustments in the web application's editor to change the default values.

[Beta] Text Layers

In some cases, your custom psd files will contain text layers and you will want to provide the text to get the output.

Our text layer feature is in [Beta] stage at the moment. Feel free to contact our support if you face any issues in implementation.

At the moment, at least one smart object needs to be provided in addition to text layers to work. You don't need to provide any image to the smart object if you don't want to, so it can stay invisible.

text_layers.uuid

If you upload the PSD files that contain text layers, text layers will be visible on our Get Mockups API besides smart objects.

Use this UUID field to refer to the text layer you want to put the text on.

text_layers.text

Provide text that will be applied to the text layer and output on the rendered image.

text_layers.font_family

Default font used is Roboto, if you want, provide a custom font family.

List of available fonts: Helvetica, Arial, Times New Roman, Futura, Garamond, Bebas Neue, Roboto, Lato, Montserrat, Open Sans, Raleway, Playfair Display, Avenir, Century Gothic, Georgia, Proxima Nova, Teko, Impact, Poppins, Merriweather

text_layers.font_size

Default font size from the PSD file will be applied.

Provide font_size to modify the default font size of the text layer.

text_layers.font_color

Default font color from the PSD file will be applied.

Provide font_color in the hex color code to change the color of the text.