Dynamic Mockups API

https://docs.dynamicmockups.com/
Admin
Dynamic Mockups API is a service that enables developers to programmatically render mockups by...
Tokens:28,388
Snippets:235
Trust Score:9.3
Update:6 months ago
Show doc for...
Tokens:
Raw
### Install SDK via npm

Source: https://docs.dynamicmockups.com/mockup-editor-sdk/embed-editor

Install the Dynamic Mockups SDK package using npm or yarn. This is for integration within JavaScript frameworks.

```sh
npm install @dynamic-mockups/mockup-editor-sdk@latest
or
yarn add @dynamic-mockups/mockup-editor-sdk@latest
```

--------------------------------

### Mockup Creation Response Example

Source: https://docs.dynamicmockups.com/api-reference/psd-upload-api

Example response structure returned when mockup_template.create_after_upload is set to true.

```json
{
    "data": {
        "uuid": "65c10d09-6724-4026-89a4-2cbf00f8670f", //Mockup UUID
        "name": "My mockup automatically created after PSD upload",
        "thumbnail": "https://app-design-copilot-localhost.s3.eu-central-1.amazonaws.com/mockup/251/thumbnail.webp",
        "smart_objects": [
            {
                "uuid": "c39de536-7255-40d4-9458-6215355a5e30",
                "name": "T-shirt"
            },
            {
                "uuid": "2574e3aa-74a3-4fee-b10d-aa3721f2ee26",
                "name": "Background"
            }
        ],
        "collections": [],
        "psd": {
            "uuid": "38607fc2-fa2d-4113-ba70-8bded3f44c23",
            "name": "My custom name"
        }
    },
    "success": true,
    "message": ""
}
```

--------------------------------

### Render Mockup with Python (requests)

Source: https://docs.dynamicmockups.com/

Use the requests library in Python to send a POST request to the Render API. Ensure you have requests installed (`pip install requests`).

```python
import requests

url = 'https://app.dynamicmockups.com/api/v1/renders'
api_key = 'bdf8301a-ef40-457d-8f2e-0d91e18726a0:d1c144ad6cbe665f680584d9a917a2a56c2ae07bd9ddc102cdd881604a159691'

data = {
    "mockup_uuid": "9ffb48c2-264f-42b9-ab86-858c410422cc",
    "smart_objects": [
        {
            "uuid": "cc864498-b8d1-495a-9968-45937edf42b3",
            "asset": {
                "url": "https://app-dynamicmockups-production.s3.eu-central-1.amazonaws.com/static/api_sandbox_icon.png"
            }
        }
    ]
}

headers = {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
    'x-api-key': api_key
}

response = requests.post(url, json=data, headers=headers)

if response.status_code == 200:
    print('Response:', response.json())
else:
    print('Error:', response.status_code, response.text)


```

--------------------------------

### Render Mockup with Node.js (axios)

Source: https://docs.dynamicmockups.com/

Use the axios library in Node.js to make a POST request to the Render API. Ensure you have axios installed (`npm install axios`).

```javascript
const axios = require('axios');

const url = 'https://app.dynamicmockups.com/api/v1/renders';
const apiKey = 'bdf8301a-ef40-457d-8f2e-0d91e18726a0:d1c144ad6cbe665f680584d9a917a2a56c2ae07bd9ddc102cdd881604a159691';

const data = {
  mockup_uuid: '9ffb48c2-264f-42b9-ab86-858c410422cc',
  smart_objects: [
    {
      uuid: 'cc864498-b8d1-495a-9968-45937edf42b3',
      asset: {
        url: 'https://app-dynamicmockups-production.s3.eu-central-1.amazonaws.com/static/api_sandbox_icon.png'
      }
    }
  ]
};

axios.post(url, data, {
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
    'x-api-key': apiKey
  }
})
.then(response => {
  console.log('Response:', response.data);
})
.catch(error => {
  console.error('Error:', error.response ? error.response.data : error.message);
});

```

--------------------------------

### Initialize Editor with npm Package

Source: https://docs.dynamicmockups.com/mockup-editor-sdk/embed-editor

Initialize the Dynamic Mockups iframe after installing the SDK via npm. Import the function and provide configuration options.

```javascript
import { initDynamicMockupsIframe } from "@dynamic-mockups/mockup-editor-sdk";

initDynamicMockupsIframe({
     iframeId: "dm-iframe",
     data: { "x-website-key": "Generate for free via our APP" },
     mode: "download",
});
```

--------------------------------

### GET /catalogs

Source: https://docs.dynamicmockups.com/ai-assisted-development/mcp

Retrieve all available catalogs from the Dynamic Mockups platform.

```APIDOC
## GET /catalogs

### Description
Retrieve all available catalogs.

### Method
GET

### Endpoint
/catalogs
```

--------------------------------

### API Response for Editor Initialization

Source: https://docs.dynamicmockups.com/mockup-editor-sdk/mockanything-editor-configuration

This is an example response from the POST /api/v1/mock-anything/embed/initialize endpoint. It provides the HTML for the iframe, the initialization script, and an event listener name.

```json
{
  "data": {
    "iframe_editor": "<iframe ...>",
    "init_function": "window.initDynamicMockupsIframe(...)",
    "event_listener_name": "dm_174829182"
  }
}
```

--------------------------------

### GET /mockups

Source: https://docs.dynamicmockups.com/api-reference/get-mockups-api

Retrieves a list of available mockups from My Templates with optional filtering parameters.

```APIDOC
## GET /mockups

### Description
Retrieves a list of available mockups from My Templates.

### Method
GET

### Endpoint
/mockups

### Parameters
#### Query Parameters
- **catalog_uuid** (string) - Optional - Filter mockups by catalog UUID.
- **collection_uuid** (string) - Optional - Filter mockups by collection UUID.
- **include_all_catalogs** (boolean) - Optional - Include mockups from all catalogs. If false or omitted, only mockups from the default catalog are returned.
- **name** (string) - Optional - Filter mockups by name.

### Response
#### Success Response (200)
- **data** (array) - A list of Mockup objects.
- **success** (boolean) - Indicates if the request was successful.
- **message** (string) - A status message.

#### Response Example
{
  "data": [],
  "success": true,
  "message": "Mockups retrieved successfully"
}
```

--------------------------------

### Render Mockup with PHP

Source: https://docs.dynamicmockups.com/

Use PHP with cURL to send a POST request to the Render API. This example shows how to set up the request with headers and JSON payload.

```php
<?php

$url = 'https://app.dynamicmockups.com/api/v1/renders';
$apiKey = 'bdf8301a-ef40-457d-8f2e-0d91e18726a0:d1c144ad6cbe665f680584d9a917a2a56c2ae07bd9ddc102cdd881604a159691';

$data = [
    "mockup_uuid" => "9ffb48c2-264f-42b9-ab86-858c410422cc",
    "smart_objects" => [
        [
            "uuid" => "cc864498-b8d1-495a-9968-45937edf42b3",
            "asset" => [
                "url" => "https://app-dynamicmockups-production.s3.eu-central-1.amazonaws.com/static/api_sandbox_icon.png"
            ]
        ]
    ]
];

$headers = [
    'Content-Type: application/json',
    'Accept: application/json',
    'x-api-key: ' . $apiKey
];

$ch = curl_init($url);
certopt($ch, CURLOPT_RETURNTRANSFER, true);
certopt($ch, CURLOPT_HTTPHEADER, $headers);
certopt($ch, CURLOPT_POST, true);
certopt($ch, CURLOPT_POSTFIELDS, json_encode($data));

$response = curl_exec($ch);

if (curl_errno($ch)) {
    echo 'Error:' . curl_error($ch);
} else {
    echo 'Response: ' . $response;
}

curl_close($ch);


```

--------------------------------

### Automatic Mockup Creation Response

Source: https://docs.dynamicmockups.com/api-reference/psd-upload-api

Example response when `mockup_template.create_after_upload` is enabled, showing the structure of the automatically created mockup data.

```APIDOC
## Automatic Mockup Creation Response

### Description
This is an example response when the `mockup_template.create_after_upload` parameter is set to `true`. It details the structure of the data returned for the automatically generated mockup.

### Response Example
```json
{
    "data": {
        "uuid": "65c10d09-6724-4026-89a4-2cbf00f8670f", //Mockup UUID
        "name": "My mockup automatically created after PSD upload",
        "thumbnail": "https://app-design-copilot-localhost.s3.eu-central-1.amazonaws.com/mockup/251/thumbnail.webp",
        "smart_objects": [
            {
                "uuid": "c39de536-7255-40d4-9458-6215355a5e30",
                "name": "T-shirt"
            },
            {
                "uuid": "2574e3aa-74a3-4fee-b10d-aa3721f2ee26",
                "name": "Background"
            }
        ],
        "collections": [],
        "psd": {
            "uuid": "38607fc2-fa2d-4113-ba70-8bded3f44c23",
            "name": "My custom name"
        }
    },
    "success": true,
    "message": ""
}
```

### Response Fields
- **data** (object): Contains the details of the created mockup.
  - **uuid** (string): The unique identifier for the created mockup.
  - **name** (string): The name of the mockup.
  - **thumbnail** (string): URL to the mockup's thumbnail image.
  - **smart_objects** (array): A list of smart objects within the mockup.
    - **uuid** (string): The unique identifier for the smart object.
    - **name** (string): The name of the smart object.
  - **collections** (array): A list of collections the mockup belongs to.
  - **psd** (object): Information about the original PSD file.
    - **uuid** (string): The unique identifier for the PSD file.
    - **name** (string): The name of the PSD file.
- **success** (boolean): Indicates if the operation was successful.
- **message** (string): Any messages related to the operation.
```

--------------------------------

### GET /mockups/{uuid}

Source: https://docs.dynamicmockups.com/ai-assisted-development/mcp

Retrieve details for a specific mockup using its unique identifier.

```APIDOC
## GET /mockups/{uuid}

### Description
Retrieve a specific mockup by UUID.

### Method
GET

### Endpoint
/mockups/{uuid}

### Parameters
#### Path Parameters
- **uuid** (string) - Required - The unique identifier of the mockup.
```

--------------------------------

### API Payload for Editor Initialization

Source: https://docs.dynamicmockups.com/mockup-editor-sdk/mockanything-editor-configuration

This is an example payload for the POST /api/v1/mock-anything/embed/initialize endpoint. It is used to dynamically initialize the editor, often with custom prompts.

```json
{
    "prompt": "A guy wearing a Gildan 5000 in New York",
}
```

--------------------------------

### Initialize Dynamic Mockups Editor in React

Source: https://docs.dynamicmockups.com/mockup-editor-sdk/mockanything-editor-configuration

This React component demonstrates how to call the Dynamic Mockups API to get an embeddable editor and initialize it. It includes state management for loading and API data, and event handling for iframe communication.

```typescript
import { useState, useEffect } from "react";
import { initDynamicMockupsIframe } from "../package";

// Expose init function globally for iframe communication
(window as any).initDynamicMockupsIframe = initDynamicMockupsIframe;

interface ApiResponse {
  event_listener_name: string;
  iframe_editor: string;
  init_function: string;
}

export default function ApiVersion() {
  const [isLoading, setIsLoading] = useState(false);
  const [prompt, setPrompt] = useState(
    "A guy wearing a Gildan 5000 t-shirt near St. Sava temple in Belgrade."
  );

  const [iframeData, setIframeData] = useState<ApiResponse>({
    event_listener_name: "",
    iframe_editor: "",
    init_function: "",
  });

  /** ----------------------------------------------------------------
   *  1) Call Dynamic Mockups API
   *  ---------------------------------------------------------------- */
  const requestEditorSession = async (): Promise<ApiResponse> => {
    const response = await fetch(
      "https://app.dynamicmockups.com/api/v1/mock-anything/embed/initialize",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "x-api-key": "YOUR_API_KEY",
        },
        body: JSON.stringify({
          prompt,
        }),
      }
    );

    if (!response.ok) {
      throw new Error("Dynamic Mockups API failed: " + response.status);
    }

    const result = await response.json();
    return result.data;
  };

  /** ----------------------------------------------------------------
   *  2) Load editor + run init function
   *  ---------------------------------------------------------------- */
  const launchEditor = async () => {
    setIsLoading(true);
    try {
      const data = await requestEditorSession();
      setIframeData(data);

      // Ensure iframe is present before running init
      setTimeout(() => {
        eval(data.init_function);
      }, 100);
    } catch (err) {
      console.error("Editor initialization failed:", err);
    } finally {
      setIsLoading(false);
    }
  };

  /** ----------------------------------------------------------------
   *  3) Listen for iframe events (image exports, etc.)
   *  ---------------------------------------------------------------- */
  useEffect(() => {
    const handleMessage = (event: MessageEvent) => {
      const isEditorEvent =
        event.data?.eventListenerName === iframeData.event_listener_name;

      if (!isEditorEvent) return;

      const payload = event.data.data;
      console.log("Editor event:", payload);
    };

    window.addEventListener("message", handleMessage);
    return () => window.removeEventListener("message", handleMessage);
  }, [iframeData.event_listener_name]);

  /** ----------------------------------------------------------------
   *  Render
   *  ---------------------------------------------------------------- */
  return (
    <div style={{ padding: "24px" }}>
      <button onClick={launchEditor} disabled={isLoading}>
        {isLoading ? "Loading…" : "Load Editor"}
      </button>
      {/* Inject returned iframe */}
      <div
        dangerouslySetInnerHTML={{
          __html: iframeData.iframe_editor,
        }}
      />
    </div>
  );
}

```

--------------------------------

### Initialize Classic Editor with CDN

Source: https://docs.dynamicmockups.com/mockup-editor-sdk/embed-editor

Initialize the Dynamic Mockups iframe using the SDK loaded via CDN. Configure the iframe ID, website key, and mode.

```javascript
<script>
      document.addEventListener("DOMContentLoaded", function () {
        DynamicMockups.initDynamicMockupsIframe({
          iframeId: "dm-iframe",
          data: { "x-website-key": "Generate for free via our APP" },
          mode: "download",
        });
      });
</script>
```

--------------------------------

### GET /collections

Source: https://docs.dynamicmockups.com/ai-assisted-development/mcp

Retrieve collections, with an option to filter by catalog.

```APIDOC
## GET /collections

### Description
Retrieve collections (optionally filter by catalog).

### Method
GET

### Endpoint
/collections
```

--------------------------------

### POST /renders

Source: https://docs.dynamicmockups.com/ai-assisted-development/mcp

Create a single mockup render using provided design assets.

```APIDOC
## POST /renders

### Description
Create a single mockup render with design assets.

### Method
POST

### Endpoint
/renders
```

--------------------------------

### GET /catalogs

Source: https://docs.dynamicmockups.com/api-reference/catalogs-api

Retrieves a list of available catalogs for the authenticated user.

```APIDOC
## GET /catalogs

### Description
Retrieves a list of available catalogs for the authenticated user.

### Method
GET

### Endpoint
/catalogs

### Parameters
#### Header Parameters
- **Accept** (string) - Required - The request must accept JSON responses (application/json).
- **x-api-key** (string) - Required - API key required for authentication.

### Response
#### Success Response (200)
- **data** (array) - A list of catalogs.
- **success** (boolean) - Indicates if the operation was successful.
- **message** (string) - A message about the operation.

#### Response Example
{
  "data": [
    {
      "uuid": "string",
      "name": "string",
      "type": "string",
      "created_at": "string",
      "created_at_timestamp": 0
    }
  ],
  "success": true,
  "message": "Catalogs retrieved successfully."
}
```

--------------------------------

### POST /api/v1/mock-anything/embed/initialize

Source: https://docs.dynamicmockups.com/mockup-editor-sdk/mockanything-editor-configuration

Initializes the editor via a backend call, returning the necessary HTML and scripts to inject the editor into your application.

```APIDOC
## POST /api/v1/mock-anything/embed/initialize

### Description
Initializes the editor via a backend call. Returns the iframe HTML, initialization function, and event listener name required to embed the editor into your application.

### Method
POST

### Endpoint
/api/v1/mock-anything/embed/initialize

### Request Body
- **prompt** (string) - Optional - Custom prompt based on which an image will be generated.

### Request Example
{
  "prompt": "A guy wearing a Gildan 5000 in New York"
}

### Response
#### Success Response (200)
- **iframe_editor** (string) - Fully prepared iframe HTML to inject into the DOM.
- **init_function** (string) - JavaScript bootstrap to connect the iframe and editor logic.
- **event_listener_name** (string) - Unique identifier for postMessage events.

#### Response Example
{
  "data": {
    "iframe_editor": "<iframe ...>",
    "init_function": "window.initDynamicMockupsIframe(...)",
    "event_listener_name": "dm_174829182"
  }
}
```

--------------------------------

### POST /renders - Create a Mockup Render

Source: https://docs.dynamicmockups.com/api-reference/render-api

Creates a mockup render by providing a mockup template UUID and design assets. Returns an image URL of the generated render.

```APIDOC
## POST /renders

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

### Method
POST

### Endpoint
https://app.dynamicmockups.com/api/v1/renders

### Parameters
#### Header Parameters
- **Accept** (string) - Required - The request must accept JSON responses. Enum: ["application/json"]
- **x-api-key** (string) - Required - API key required for authentication.

#### Request Body
- **mockup_uuid** (string) - Required - The UUID of the mockup template.
- **export_label** (string) - Optional - A label for the exported image.
- **export_options** (object) - Optional - Options for exporting the image.
  - **image_format** (string) - Optional - The format of the exported image. Enum: ["jpg", "png", "webp"]
  - **image_size** (integer) - Optional - The size in pixels of the exported image.
  - **mode** (string) - Optional - Determines whether the exported image should be viewed in the browser or downloaded. Enum: ["view", "download"]
- **smart_objects** (array) - Required - List of smart objects inside a chosen mockup.
  - **uuid** (string) - Required - The UUID of the smart object.
  - **asset** (object) - Optional - The asset to be placed in the smart object.
    - **url** (string) - Required - URL to the asset image.
    - **fit** (string) - Optional - How the asset fits within the designated area. Enum: ["stretch", "contain", "cover"]
    - **size** (object) - Optional - The size of the asset.
      - **width** (integer) - Required - The width of the asset in pixels.
      - **height** (integer) - Required - The height of the asset pixels.
    - **position** (object) - Optional - The position of the asset.
      - **top** (integer) - Required - The top position of the asset.
      - **left** (integer) - Required - The left position of the asset.
    - **rotate** (number) - Optional - The rotation angle of the provided asset.
  - **pattern** (object) - Optional - Configuration for using the asset as a repeating pattern.
    - **enabled** (boolean) - Required - Whether the asset is used as a repeating pattern.
    - **scale_percent** (number) - Optional - Scale of the pattern relative to the original asset size.
  - **color** (string) - Optional - Color overlay for the smart object in hex code.
  - **blending_mode** (string) - Optional - 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** (object) - Optional - Optional adjustment layers applied to the smart object.
    - **brightness** (integer) - Optional - Brightness adjustment (from -150 to 150).
    - **contrast** (integer) - Optional - Contrast adjustment (from -100 to 100).
    - **opacity** (integer) - Optional - Opacity adjustment (from 0 to 100).
    - **saturation** (integer) - Optional - Saturation adjustment (from -100 to 100).
    - **vibrance** (integer) - Optional - Vibrance adjustment (from -100 to 100).
    - **blur** (integer) - Optional - Blur adjustment (from 0 to 100).
  - **print_area_preset_uuid** (string) - Optional - UUID of the print area preset to automatically position provided design asset.
- **text_layers** (array) - Optional - List of text layers for the chosen mockup.
  - **uuid** (string) - Required - The UUID of the text layer.
  - **text** (string) - Required - The text content for the text layer.
  - **font_family** (string) - Optional - The font family of the text.
  - **font_size** (number) - Optional - The font size for the text in pixels.
  - **font_color** (string) - Optional - The color of the text in hex code.

### Request Example
```json
{
  "mockup_uuid": "m-12345",
  "export_label": "T-Shirt Design",
  "export_options": {
    "image_format": "png",
    "image_size": 1080,
    "mode": "view"
  },
  "smart_objects": [
    {
      "uuid": "so-abcde",
      "asset": {
        "url": "https://example.com/my-design.png",
        "fit": "contain",
        "size": {
          "width": 500,
          "height": 500
        },
        "position": {
          "top": 100,
          "left": 150
        }
      },
      "color": "#FFFFFF"
    }
  ],
  "text_layers": [
    {
      "uuid": "tl-fghij",
      "text": "Awesome T-Shirt",
      "font_family": "Arial",
      "font_size": 48,
      "font_color": "#000000"
    }
  ]
}
```

### Response
#### Success Response (200)
- **data** (object) - Description
  - **export_label** (string) - A label for the exported image provided in request.
  - **export_path** (string) - The URL to the rendered image.
```

--------------------------------

### Initialize Dynamic Mockups Editor

Source: https://docs.dynamicmockups.com/mockup-editor-sdk/classic-editor-configuration

This snippet shows how to initialize the Dynamic Mockups editor with basic configuration options. You can customize its behavior by adjusting the parameters passed to the initDynamicMockupsIframe function.

```APIDOC
## Initialize Dynamic Mockups Editor

### Description
Initializes the Dynamic Mockups embedded editor with specified configuration options. This allows for customization of the editor's behavior, such as setting the website key, mode, and callback functions.

### Method
JavaScript (SDK Function)

### Endpoint
N/A (Client-side SDK)

### Parameters
#### Request Body (Configuration Object)
- **iframeId** (string) - Required - The ID of the iFrame element where the editor will be embedded. Defaults to "dm-iframe".
- **data** (object) - Required - An object containing data to influence the embedded editor's behavior. Includes the "x-website-key" which is required for authentication.
  - **x-website-key** (string) - Required - Your unique website key, obtainable from the Dynamic Mockups APP.
- **mode** (string) - Required - Determines the editor's operational mode. Accepted values are "download" or "custom". Defaults to "download".
- **callback** (object) - Optional - A callback object to be used when the **mode** is set to "custom".

### Request Example
```javascript
{
  "iframeId": "dm-iframe",
  "data": {
    "x-website-key": "YOUR_WEBSITE_KEY"
  },
  "mode": "download",
  "callback": {}
}
```

### Response
This function does not return a direct response. It initializes the editor within the specified iFrame.

#### Success Response (Initialization)
N/A

#### Response Example
N/A
```

--------------------------------

### Get Collections

Source: https://docs.dynamicmockups.com/api-reference/get-collections-api

Retrieves a list of available collections. Optionally filter by catalog UUID.

```APIDOC
## GET /collections

### Description
Retrieves a list of available collections. Optionally filter by catalog UUID.

### Method
GET

### Endpoint
/collections

### Parameters
#### Header Parameters
- **Accept** (string) - Required - The request must accept JSON responses.
- **x-api-key** (string) - Required - API key required for authentication.

#### Query Parameters
- **catalog_uuid** (string) - Optional - Optional UUID of the catalog to filter collections by.
- **include_all_catalogs** (boolean) - Optional - Optional parameter to include collections from all catalogs. If false or omitted, only collections from the default catalog are returned. Set to true to fetch from all catalogs.

### Response
#### Success Response (200)
- **data** (array) - A list of collections retrieved successfully.
  - **uuid** (string) - The UUID of the collection.
  - **name** (string) - The name of the collection.
  - **mockup_count** (integer) - The number of mockups in this collection.
  - **created_at** (string) - The creation time of the collection.
  - **updated_at** (string) - The last update time of the collection.
  - **created_at_timestamp** (integer) - The creation time of the collection in UNIX timestamp format.
  - **updated_at_timestamp** (integer) - The last update time of the collection in UNIX timestamp format.
- **success** (boolean) - Indicates if the operation was successful.
- **message** (string) - A message about the operation.

#### Error Response (400)
Bad request due to invalid input parameters.

#### Error Response (401)
Unauthorized request, invalid or missing API key.
```

--------------------------------

### GET /mockup/{uuid}

Source: https://docs.dynamicmockups.com/api-reference/get-mockups-api

Retrieves a specific mockup from My Templates using its unique identifier (UUID).

```APIDOC
## GET /mockup/{uuid}

### Description
Retrieves a specific mockup from My Templates using its UUID.

### Method
GET

### Endpoint
/mockup/{uuid}

### Parameters
#### Path Parameters
- **uuid** (string) - Required - The UUID of the mockup to retrieve.

#### Header Parameters
- **Accept** (string) - Required - The request must accept JSON responses (application/json).
- **x-api-key** (string) - Required - API key required for authentication.

### Response
#### Success Response (200)
- **data** (object) - The mockup object.
- **success** (boolean) - Indicates if the request was successful.
- **message** (string) - Status message.
```

--------------------------------

### POST /render-print-files

Source: https://docs.dynamicmockups.com/api-reference/render-print-files-api

Exports print files of all smart objects in a mockup template. Consumes 2 credits per exported file.

```APIDOC
## POST /render-print-files

### Description
Exports print files of all smart objects in a mockup template. This endpoint is primarily used for printing purposes.

### Method
POST

### Endpoint
/render-print-files

### Parameters
#### Request Body
- **export_options.image_dpi** (integer) - Optional - The DPI (Dots Per Inch) for the exported file. If not provided, it defaults to the value inherited from the PSD file.

### Response
#### Success Response (200)
- **success** (boolean) - Indicates if the print file export was successful.
- **message** (string) - A message about the export process.
- **data** (array) - List of exported files.
  - **export_path** (string) - URL to download the print file.
  - **smart_object_uuid** (string) - UUID of the smart object used in rendering.
  - **smart_object_name** (string) - Name of the smart object.

#### Error Responses
- **400** - Bad request due to invalid input parameters.
- **401** - Unauthorized request, invalid or missing API key.
```

--------------------------------

### Define Multiple Artwork Mappings

Source: https://docs.dynamicmockups.com/api-reference/bulk-render-mockups-api

Example of passing multiple artwork URLs in the collection mapping payload.

```json
{
    "collection_uuid": "0663101b-f01c-4e85-89af-f90b4e9f983b",
    "artworks": {
        "artwork_main": "https://app-dynamicmockups-production.s3.eu-central-1.amazonaws.com/static/api_sandbox_icon.png",
        "artwork_secondary": "https://app-dynamicmockups-production.s3.eu-central-1.amazonaws.com/static/api_sandbox_icon.png",
        //add any number of artworks needed
    }
}
```

--------------------------------

### Dynamic Mockups Client-Side Configuration

Source: https://docs.dynamicmockups.com/mockup-editor-sdk/mockanything-editor-configuration

Configuration parameters for the DynamicMockups.initDynamicMockupsIframe method.

```APIDOC
## Client-Side Configuration (data object)

### Description
Parameters used within the `data` object when calling `DynamicMockups.initDynamicMockupsIframe`.

### Parameters
- **x-website-key** (string) - Required - Connect the embed editor with Dynamic Mockups.
- **editorType** (string) - Optional - Editor type: 'classic' or 'mockanything'.
- **themeAppearance** (string) - Optional - Theme appearance: 'light' or 'dark'.
- **mockanything** (object) - Required - Specific options for the mockanything editor.

### Mockanything Options
- **eventListenerName** (string) - Name of event listener for parent-child iframe communication.
- **customModelImage** (string) - Custom image URL provided instead of API generated approach.
- **prompt** (string) - Custom prompt for image generation.
```

--------------------------------

### Define Color Mapping in Bulk Render API

Source: https://docs.dynamicmockups.com/api-reference/bulk-render-mockups-api

Example of including both artwork and color mappings in the API request.

```json
{
    "collection_uuid": "0663101b-f01c-4e85-89af-f90b4e9f983b",
    "artworks": {
        "artwork_main": "https://app-dynamicmockups-production.s3.eu-central-1.amazonaws.com/static/api_sandbox_icon.png"
    },
    "colors": {
        "color_main": "#C0375E"
    }
}
```

--------------------------------

### Artwork Binary File Reference

Source: https://docs.dynamicmockups.com/api-reference/bulk-render-mockups-api

Example of the JSON key-value pair replaced when using FormData for binary file uploads.

```json
"artwork_main": "https://app-dynamicmockups-production.s3.eu-central-1.amazonaws.com/static/api_sandbox_icon.png",
```

--------------------------------

### Include SDK via CDN

Source: https://docs.dynamicmockups.com/mockup-editor-sdk/embed-editor

Include the Dynamic Mockups SDK JavaScript from the CDN. This script must be loaded before initializing the iframe.

```javascript
// you must add this script before using initDynamicMockupsIframe function in next step
<script 
    src="https://cdn.jsdelivr.net/npm/@dynamic-mockups/mockup-editor-sdk@latest/dist/index.js"
></script>
```

--------------------------------

### POST initDynamicMockupsIframe

Source: https://docs.dynamicmockups.com/mockup-editor-sdk/classic-editor-configuration

Initializes the DynamicMockups iframe with configuration data and optional callback handlers.

```APIDOC
## POST initDynamicMockupsIframe

### Description
Initializes the DynamicMockups iframe within the specified DOM element.

### Parameters
#### Request Body
- **iframeId** (string) - Required - The ID of the iframe element.
- **data** (object) - Required - Configuration object including 'x-website-key' and custom fields.
- **mode** (string) - Required - The operational mode (e.g., 'download', 'custom').
- **callback** (function) - Optional - Function to execute upon completion, receiving callbackData.

### Request Example
```javascript
DynamicMockups.initDynamicMockupsIframe({
  iframeId: "dm-iframe",
  data: { 
    "x-website-key": "Generate for free via our APP",
    "customField": "value"
  },
  mode: "download"
});
```

### Response
#### Success Response (callbackData)
- **mockupsExport** (array) - List of exported mockups.
- **mockupsExport[0].export_label** (string) - Unique label for the export.
- **mockupsExport[0].export_path** (string) - URL to the exported file.
- **customFields** (object) - The original custom fields passed during initialization.
```

--------------------------------

### Google Drive File Share Link

Source: https://docs.dynamicmockups.com/knowledge-base/tutorials/how-to-provide-image-link-from-google-drive-and-dropbox-to-render-api-coming-soon

This is an example of a Google Drive file share link. The file ID is the bolded part.

```text
https://drive.google.com/file/d/1wMgCWAsqlw0nXcMhCldTbwSznMdXUmBT/view?usp=sharing
```

--------------------------------

### Define Artwork Mapping in Bulk Render API

Source: https://docs.dynamicmockups.com/api-reference/bulk-render-mockups-api

Example of passing a single artwork URL within the collection mapping payload.

```json
{
    "collection_uuid": "0663101b-f01c-4e85-89af-f90b4e9f983b",
    "artworks": {
        "artwork_main": "https://app-dynamicmockups-production.s3.eu-central-1.amazonaws.com/static/api_sandbox_icon.png"
    }
}
```

--------------------------------

### POST /renders/bulk

Source: https://docs.dynamicmockups.com/api-reference/bulk-render-mockups-api

Creates bulk mockup renders based on a specified mockup collection UUID.

```APIDOC
## POST /renders/bulk

### Description
Create bulk mockup renders based on a mockup collection defined in the My Templates section.

### Method
POST

### Endpoint
/renders/bulk

### Parameters
#### Request Body
- **collection_uuid** (string, uuid) - Required - The unique identifier of the collection.
- **artworks** (object) - Optional - Key-value map of artwork URIs.
- **colors** (object) - Optional - Key-value map of color inputs using hex codes.
- **export_label** (string) - Optional - Label for the export.
- **export_options** (object) - Optional - Settings for format, size, and behavior.

### Request Example
{
  "collection_uuid": "550e8400-e29b-41d4-a716-446655440000",
  "artworks": {
    "front": "https://example.com/image.jpg"
  },
  "colors": {
    "shirt_color": "#FFFFFF"
  }
}

### Response
#### Success Response (200)
- **success** (boolean) - Status of the request.
- **message** (string) - Status message.
- **data** (object) - Contains export_label and list of exports with URLs and labels.

#### Response Example
{
  "success": true,
  "message": "Successful response of bulk mockup renders",
  "data": {
    "export_label": "my-export",
    "exports": [
      {
        "url": "https://example.com/render.png",
        "label": "front-view"
      }
    ]
  }
}
```

--------------------------------

### Configure MCP Server for Claude

Source: https://docs.dynamicmockups.com/ai-assisted-development/mcp

Add this configuration to a `.mcp.json` file in your project root to set up the Dynamic Mockups MCP server for Claude. Ensure you replace `dynamic_mockups_api_key` with your actual API key.

```json
{
   "mcpServers": {
      "dynamic-mockups": {
         "command": "npx",
         "args": ["-y", "@dynamic-mockups/mcp"],
         "env": {
            "DYNAMIC_MOCKUPS_API_KEY": "dynamic_mockups_api_key"
         }
      }
   }
}
```

--------------------------------

### POST /render

Source: https://docs.dynamicmockups.com/api-reference/render-print-files-api

Endpoint to initiate the rendering process for print files.

```APIDOC
## POST /render

### Description
Initiates the rendering process for print-ready files based on the provided mockup configuration.

### Method
POST

### Endpoint
/render
```

--------------------------------

### POST /api/v1/renders

Source: https://docs.dynamicmockups.com/

Creates a new mockup render request using a specified mockup UUID and smart object assets.

```APIDOC
## POST /api/v1/renders

### Description
Creates a new mockup render request. This endpoint requires an API key for authentication.

### Method
POST

### Endpoint
https://app.dynamicmockups.com/api/v1/renders

### Request Body
- **mockup_uuid** (string) - Required - The unique identifier for the mockup template.
- **smart_objects** (array) - Required - A list of smart objects to be replaced in the mockup.
  - **uuid** (string) - Required - The unique identifier for the smart object layer.
  - **asset** (object) - Required - The asset details.
    - **url** (string) - Required - The URL of the design asset to be applied.

### Request Example
{
  "mockup_uuid": "9ffb48c2-264f-42b9-ab86-858c410422cc",
  "smart_objects": [
    {
      "uuid": "cc864498-b8d1-495a-9968-45937edf42b3",
      "asset": {
        "url": "https://app-dynamicmockups-production.s3.eu-central-1.amazonaws.com/static/api_sandbox_icon.png"
      }
    }
  ]
}
```

--------------------------------

### Retrieve Catalogs via OpenAPI Specification

Source: https://docs.dynamicmockups.com/api-reference/catalogs-api

The OpenAPI specification defines the structure for the Get Catalogs endpoint, requiring an API key for authentication and JSON-formatted responses.

```json
{"openapi":"3.1.0","info":{"title":"Dynamic Mockups Catalog 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":{"/catalogs":{"get":{"summary":"Get Catalogs","description":"Retrieves a list of available catalogs for the authenticated user.","operationId":"getCatalogs","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."}],"responses":{"200":{"description":"A list of catalogs retrieved successfully.","content":{"application/json":{"schema":{"type":"object","properties":{"data":{"type":"array","items":{"type":"object","properties":{"uuid":{"type":"string","description":"The UUID of the catalog."},"name":{"type":"string","description":"The name of the catalog."},"type":{"type":"string","description":"The type of the catalog (e.g., custom, default)."},"created_at":{"type":"string","format":"date-time","description":"The creation time of the catalog."},"created_at_timestamp":{"type":"integer","description":"The creation time of the catalog in UNIX timestamp format."}}}},"success":{"type":"boolean","description":"Indicates if the operation was successful."},"message":{"type":"string","description":"A message about the operation."}}}}}},"400":{"description":"Bad request due to invalid input parameters."},"401":{"description":"Unauthorized request, invalid or missing API key."}}}}}}
```

--------------------------------

### Initialize DynamicMockups Iframe with Data

Source: https://docs.dynamicmockups.com/mockup-editor-sdk/classic-editor-configuration

Use this snippet to initialize the iframe with specific data and set the mode to download.

```javascript
// data example
<script>
      document.addEventListener("DOMContentLoaded", function () {
        DynamicMockups.initDynamicMockupsIframe({
          iframeId: "dm-iframe",
          data: { 
            "x-website-key": "Generate for free via our APP",
            "MORE DATA HERE": "VALUE" 
          },
          mode: "download"
        });
      });
</script>
```

--------------------------------

### Initialize Dynamic Mockups Editor with Data Parameter

Source: https://docs.dynamicmockups.com/mockup-editor-sdk/mockanything-editor-configuration

Use this JavaScript snippet to initialize the Dynamic Mockups iframe. It requires the iframe ID and a 'data' object for configuration, such as setting the website key and editor type.

```javascript
<script>
      document.addEventListener("DOMContentLoaded", function () {
        DynamicMockups.initDynamicMockupsIframe({
          iframeId: "dm-iframe",
          data: {
            "x-website-key": "Generate for free via our APP",
            editorType: "mockanything"
             mockanything: {
              customModelImage:
               "https://app-dynamicmockups-production.s3.eu-central-1.amazonaws.com/static/bdeccdc60a897e80ce9baf2098855723.jpg",
             },
          }
        });
      });
</script>
```

--------------------------------

### Listen for Dynamic Mockups Editor Events

Source: https://docs.dynamicmockups.com/mockup-editor-sdk/mockanything-editor-configuration

This code snippet shows how to set up a message event listener on the window to receive events from the Dynamic Mockups editor. Ensure the event listener name matches the one returned by the API.

```typescript
window.addEventListener("message", (event) => {
  if (event.data.eventListenerName === iframeData.event_listener_name) {
    console.log(event.data.data);
  }
});
```

--------------------------------

### POST /psd/upload

Source: https://docs.dynamicmockups.com/ai-assisted-development/mcp

Upload a PSD file and optionally create a mockup template.

```APIDOC
## POST /psd/upload

### Description
Upload a PSD file and optionally create a mockup template.

### Method
POST

### Endpoint
/psd/upload
```
Tokens:
Raw