Dynamic Mockups API
  • ๐Ÿ”‘Get your API Key
  • ๐Ÿ‘‹Get support via Slack
  • ๐Ÿš€Get your first render in 1 minute
  • Getting Started
    • How does the API work?
    • How can I get my API key?
    • How are API calls billed?
    • How can I get support?
    • Frequently Asked Questions
    • Troubleshooting
  • API REFERENCE
    • Render API
    • Get Mockups API
    • Get Collections API
    • PSD Upload API
  • PRODUCT API REFERENCE
    • Render Product Images API
    • Get Products API
  • Mockup Editor SDK
    • Embed Mockup Editor
    • Embed in bubble.io
    • Editor Configuration
  • Knowledge Base
    • Tutorials
      • PSD Formatting Guide for Uploading to Dynamic Mockups
      • How to provide image link from Google Drive to Render API
      • How to render images using Zapier
      • How to render images using Make
    • Changelog
    • Photoshop API Feature Support
Powered by GitBook
On this page

Was this helpful?

  1. API REFERENCE

Render API

PreviousTroubleshootingNextGet Mockups API

Last updated 1 month ago

Was this helpful?

Export OpenAPI specification for Render 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

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.

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

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.

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

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

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.

or color names from

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

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

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

this link
Get Mockups API
contact our support
Get Mockups API
Create new print area preset
10KB
render_api.json
Left image without color - Right image with color
No Blending Mode
Blending mode "SCREEN" applied
Setting default Adjustment Layers in web aplication editor
  • POSTCreate a Mockup Render
  • export_label
  • export_options.image_format
  • export_options.image_size
  • export_options.mode
  • smart_objects.asset.url
  • smart_objects.asset.file
  • smart_objects.color
  • smart_objects.asset.fit
  • smart_objects.asset.position
  • smart_objects.asset.size
  • smart_objects.print_area_preset_uuid
  • smart_objects.blending_mode
  • smart_objects.adjustment_layers
  • [Beta] Text Layers
  • text_layers.uuid
  • text_layers.text
  • text_layers.font_family
  • text_layers.font_size
  • text_layers.font_color

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
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": ""
}