# Render Mockup API ## Create a Mockup Render > Returns an image URL of the selected mockup template and provided design asset. ```json {"openapi":"3.1.0","info":{"title":"Dynamic Mockups API","version":"1.0"},"servers":[{"url":"https://app.dynamicmockups.com/api/v1"}],"security":[{"apiKeyAuth":[]}],"components":{"securitySchemes":{"apiKeyAuth":{"type":"apiKey","in":"header","name":"x-api-key","description":"API key required for authentication."}}},"paths":{"/renders":{"post":{"summary":"Create a Mockup Render","description":"Returns an image URL of the selected mockup template and provided design asset.","operationId":"createRender","parameters":[{"in":"header","name":"Accept","required":true,"schema":{"type":"string","enum":["application/json"]},"description":"The request must accept JSON responses."},{"in":"header","name":"x-api-key","required":true,"schema":{"type":"string","description":"API key required for authentication."}}],"requestBody":{"required":true,"content":{"application/json":{"schema":{"type":"object","properties":{"mockup_uuid":{"type":"string","description":"The UUID of the mockup template."},"export_label":{"type":"string","description":"A label for the exported image."},"export_options":{"type":"object","properties":{"image_format":{"type":"string","description":"The format of the exported image.","enum":["jpg","png","webp"]},"image_size":{"type":"integer","description":"The size in pixels of the exported image."},"mode":{"type":"string","description":"Determines whether the exported image should be viewed in the browser or downloaded.","enum":["view","download"]}}},"smart_objects":{"type":"array","description":"List of smart objects inside a chosen mockup.","items":{"type":"object","properties":{"uuid":{"type":"string","description":"The UUID of the smart object."},"asset":{"type":"object","properties":{"url":{"type":"string","description":"URL to the asset image."},"fit":{"type":"string","description":"How the asset fits within the designated area.","enum":["stretch","contain","cover"]},"size":{"type":"object","properties":{"width":{"type":"integer","description":"The width of the asset in pixels."},"height":{"type":"integer","description":"The height of the asset pixels."}}},"position":{"type":"object","properties":{"top":{"type":"integer","description":"The top position of the asset."},"left":{"type":"integer","description":"The left position of the asset."}}},"rotate":{"type":"number","description":"The rotation angle of the provided asset."}}},"pattern":{"type":"object","description":"Configuration for using the asset as a repeating pattern.","properties":{"enabled":{"type":"boolean","description":"Whether the asset is used as a repeating pattern."},"scale_percent":{"type":"number","description":"Scale of the pattern relative to the original asset size."}}},"color":{"type":"string","description":"Color overlay for the smart object in hex code."},"blending_mode":{"type":"string","description":"Blending mode applied to the smart object.","enum":["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"]},"adjustment_layers":{"type":"object","description":"Optional adjustment layers applied to the smart object.","properties":{"brightness":{"type":"integer","description":"Brightness adjustment (from -150 to 150)."},"contrast":{"type":"integer","description":"Contrast adjustment (from -100 to 100)."},"opacity":{"type":"integer","description":"Opacity adjustment (from 0 to 100)."},"saturation":{"type":"integer","description":"Saturation adjustment (from -100 to 100)."},"vibrance":{"type":"integer","description":"Vibrance adjustment (from -100 to 100)."},"blur":{"type":"integer","description":"Blur adjustment (from 0 to 100)."}}},"print_area_preset_uuid":{"type":"string","description":"UUID of the print area preset to automatically position provided design asset."}}}},"text_layers":{"type":"array","description":"List of text layers for the chosen mockup.","items":{"type":"object","properties":{"uuid":{"type":"string","description":"The UUID of the text layer."},"text":{"type":"string","description":"The text content for the text layer."},"font_family":{"type":"string","description":"The font family of the text."},"font_size":{"type":"number","description":"The font size for the text in pixels."},"font_color":{"type":"string","description":"The color of the text in hex code."}}}}},"required":["mockup_uuid","smart_objects"]}}}},"responses":{"200":{"description":"Image successfully rendered.","content":{"application/json":{"schema":{"type":"object","properties":{"data":{"type":"object","properties":{"export_label":{"type":"string","description":"A label for the exported image provided in request."},"export_path":{"type":"string","description":"The URL where the rendered image can be downloaded."}}},"success":{"type":"boolean","description":"Indicates if the render API call was successful."},"message":{"type":"string","description":"A message about the render API."}}}}}},"400":{"description":"Bad request due to invalid input parameters."},"401":{"description":"Unauthorized request, invalid or missing API key."}}}}}} ``` Export OpenAPI specification for Render API {% file src="" %} {% hint style="info" %} ### You need multiple mockup renders in a single request? See [Batch Render Mockups API](https://docs.dynamicmockups.com/api-reference/batch-render-mockups-api). A more efficient way to generate multiple mockups in a single request way much faster than the **Render Mockup API**. {% endhint %} ## 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` {% hint style="info" %} 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. {% endhint %} ## 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](https://drafts.csswg.org/css-color-4/#named-colors)

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` {% hint style="info" %} 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**. {% endhint %} ## 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. {% hint style="info" %} 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. {% endhint %} ## 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. {% hint style="info" %} 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. {% endhint %} ## 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](https://docs.dynamicmockups.com/api-reference/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. {% embed url="" fullWidth="false" %} ## 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: {% code overflow="wrap" %} ``` 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 ``` {% endcode %}

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 | ```json //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 } }] ``` {% hint style="info" %} 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. {% endhint %}
## \[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](https://docs.dynamicmockups.com/getting-started/how-can-i-get-support) if you face any issues in implementation. {% hint style="warning" %} 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. {% endhint %} ## text\_layers.uuid If you upload the PSD files that contain text layers, text layers will be visible on our [Get Mockups API](https://docs.dynamicmockups.com/api-reference/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.