Render API

Create a Mockup Render

post

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

Authorizations

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

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

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: 788

{
  "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
      },
      "color": "#444ABF",
      "blending_mode": "MULTIPLY",
      "adjustment_layers": {
        "brightness": 100,
        "contrast": 50,
        "opacity": 100,
        "saturation": 0,
        "vibrance": -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

10KB

render_api.json

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 turn on Print Area and place the asset position and size. Each of your uploaded assets using Render API will inherit this setting.

You can optionally change 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.

Create new print area preset

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

//Render API adjustment_layers request example

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

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.

Setting default Adjustment Layers in web aplication editor

[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.